/* GENERATED by scripts/build-css.py - do not edit directly.
   Edit the source files listed below, then re-run the script.
   Order is significant and reproduces the original page link order. */

/* ===== components.css ===== */
/* ============================================================
   VITALITY — COMPONENT LIBRARY
   Single definition for every shared UI component.
   Loaded second, after design-tokens.css, on every page.
   ============================================================ */

/* ============================================================
   BASE BODY — gradient background (all pages)
   ============================================================ */
/* Body is transparent — lets the shader canvas (z-index:-1) show through.
   The html element in design-tokens.css provides the dark aurora background.
   NOTE: Chrome DevTools screenshots may show white here (tool artifact);
   real browsers render the html background correctly. */
body {
  background: transparent;
}

/* Film grain overlay — pointer-events: none, never blocks clicks */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Inner pages: transparent — html provides the background */
body.inner-page {
  background: transparent;
  padding-top: 0;
}

/* Inner page typography overrides */
body.inner-page h1,
body.inner-page h2,
body.inner-page h3,
body.inner-page h4 {
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
body.inner-page p,
body.inner-page li,
body.inner-page td {
  font-family: var(--font-body);
  line-height: 1.65;
  color: var(--text-dim);
}
body.inner-page strong { color: rgba(255,255,255,0.9); font-weight: 600; }
body.inner-page a { color: var(--el-violet-bright); transition: color 0.2s var(--el-ease); }
body.inner-page a:hover { color: #fff; }

/* Homepage: hero handles top clearance */
body.index-page { padding-top: 0; }

/* ============================================================
   SCROLL INDICATOR
   ============================================================ */
.scroll-indicator {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: rgba(255,255,255,0.06);
  z-index: 99999;
  pointer-events: none;
}
.scroll-indicator-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--el-violet-deep), var(--el-violet));
  width: 0%;
  transition: width 0.1s linear;
}

/* ============================================================
   SKIP LINK (accessibility)
   ============================================================ */
.skip-link {
  position: fixed;
  top: -100%;
  left: var(--space-md);
  z-index: 9999;
  padding: var(--space-sm) var(--space-md);
  background: var(--el-violet);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: top 0.2s var(--ease-standard);
}
.skip-link:focus { top: var(--space-md); }

/* ============================================================
   NAVBAR — floating glass pill, identical on every page
   ============================================================ */

/* Header wrapper — zero height so fixed nav doesn't push content */
header.main-hero {
  position: static !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
  filter: none !important;
}

/* Defense: never let any script hide/transform the navbar container */
header.main-hero .navbar,
header.main-hero .navbar.navbar-sticky,
header.main-hero .navbar.is-scrolled {
  transform: none !important;
  animation: none !important;
}

/* The navbar itself */
.main-hero > .navbar,
header.main-hero .navbar {
  position: fixed;
  top: 16px;
  left: 0; right: 0;
  margin-inline: auto;
  z-index: var(--z-fixed);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 999px;
  width: min(1300px, calc(100% - 40px));
  padding: 14px 16px 14px 26px;
  background: rgba(10, 9, 14, 0);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  border: 1px solid rgba(255,255,255,0);
  box-shadow: 0 0px 0px 0px rgba(0,0,0,0);
  transition:
    width        0.6s cubic-bezier(0.16, 1, 0.3, 1),
    padding      0.6s cubic-bezier(0.16, 1, 0.3, 1),
    background   0.6s var(--ease-standard),
    border-color 0.6s var(--ease-standard),
    box-shadow   0.6s var(--ease-standard),
    backdrop-filter         0.6s var(--ease-standard),
    -webkit-backdrop-filter 0.6s var(--ease-standard),
    top          0.6s cubic-bezier(0.16, 1, 0.3, 1);
  height: 70px;
}

/* Scrolled state — compact glass pill */
.main-hero > .navbar.is-scrolled,
header.main-hero .navbar.is-scrolled {
  top: 10px;
  width: min(1060px, calc(100% - 32px));
  padding: 9px 12px 9px 20px;
  background: rgba(10, 9, 14, 0.78);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border-color: rgba(255,255,255,0.09);
  box-shadow: 0 16px 48px -16px rgba(0,0,0,0.88), inset 0 1px 0 rgba(255,255,255,0.07);
  height: 60px;
}

/* Logo */
.navbar .logo,
.navbar .logo a {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 1.05rem;
  background: linear-gradient(120deg, #fff, var(--el-violet-bright));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
}

@supports not (background-clip: text) {
  .navbar .logo a { color: var(--el-violet); background: none; -webkit-text-fill-color: var(--el-violet); }
}

/* Inline nav links — reset fullscreen overlay from modern.js */
header.main-hero .navbar ul.nav-links {
  position: static !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  z-index: auto !important;
  transition: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nav link items */
.navbar .nav-links li a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dim);
  transition: color 0.2s var(--el-ease), background 0.2s var(--el-ease);
  text-decoration: none;
}
.navbar .nav-links li a:hover {
  color: #fff;
  background: rgba(255,255,255,0.06);
}
.navbar .nav-links li a.nav-cta {
  background: linear-gradient(135deg, var(--el-violet-deep), var(--el-violet));
  color: #fff;
  font-weight: 600;
  box-shadow: var(--el-glow-violet);
}
.navbar .nav-links li a.nav-cta:hover { filter: brightness(1.1); }
.navbar .nav-links li a.nav-active:not(.nav-cta) {
  color: #fff;
  background: rgba(145,71,255,0.18);
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--el-hairline);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 18px; height: 2px;
  background: #fff;
  border-radius: 2px;
  position: relative;
  transition: transform 0.3s var(--el-ease), opacity 0.2s;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after  { position: absolute; top: 6px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span::after  { transform: translateY(-6px) rotate(-45deg); }

/* menu-toggle: hidden always — we use nav-toggle from elevated.js on mobile */
.menu-toggle { display: none !important; }

/* ---- Mobile nav: nav-toggle opens the modern-sidebar fullscreen overlay ----
   The modern-sidebar itself is the fullscreen menu; nav-toggle triggers it.
   This overrides the elevated.js dropdown to use the full-screen instead.    */
@media (max-width: 900px) {
  /* Keep nav-toggle visible in the navbar pill — use violet accent to stand out */
  .nav-toggle {
    display: inline-flex;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(145,71,255,0.35);
    border-radius: 12px;
    background: rgba(145,71,255,0.12);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s var(--ease-standard), border-color 0.2s var(--ease-standard);
    position: relative;
  }
  .nav-toggle:hover { background: rgba(145,71,255,0.22); border-color: rgba(145,71,255,0.5); }
  /* MenuToggleIcon SVG animation (exact replica of original React component) */
  .nav-toggle .menu-toggle-svg {
    width: 22px;
    height: 22px;
    color: #fff;
    display: block;
    transition: transform 500ms ease-in-out;
  }
  .nav-toggle .menu-svg-path {
    stroke-dasharray: 12 63;
    transition: stroke-dasharray 500ms ease-in-out, stroke-dashoffset 500ms ease-in-out;
  }
  /* Open state — SVG rotates -45° and path morphs to X */
  body.nav-open .nav-toggle { background: rgba(145,71,255,0.2); border-color: rgba(145,71,255,0.4); }
  body.nav-open .nav-toggle .menu-toggle-svg { transform: rotate(-45deg); }
  body.nav-open .nav-toggle .menu-svg-path {
    stroke-dasharray: 20 300;
    stroke-dashoffset: -32.42px;
  }
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  /* Mobile nav dropdown — fixed full-width panel below the navbar */
  header.main-hero .navbar ul.nav-links {
    position: fixed !important;
    top: 80px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    height: auto !important;
    flex-direction: column !important;
    align-items: stretch;
    gap: 0 !important;
    padding: 8px !important;
    border-radius: 20px;
    background: rgba(10, 8, 18, 0.98) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    border: 1px solid rgba(145,71,255,0.2) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.05) !important;
    opacity: 0;
    transform: translateY(-12px) scale(0.97);
    pointer-events: none;
    z-index: calc(var(--z-fixed) + 5);
    transition: opacity 0.22s var(--el-ease), transform 0.22s var(--el-ease) !important;
  }
  body.nav-open header.main-hero .navbar ul.nav-links {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }
  /* Nav link items — bigger tap targets on mobile */
  .navbar .nav-links li a {
    padding: 13px 16px !important;
    font-size: 1rem !important;
    border-radius: 12px !important;
    color: rgba(255,255,255,0.7) !important;
  }
  /* ---- MenuVertical animation — arrow from left + link slide (Framer Motion port) ---- */
  .navbar .nav-links li {
    display: flex !important;
    align-items: center;
    gap: 0;
    overflow: hidden;
    cursor: pointer;
  }

  /* Arrow: starts off-screen left, slides to 0 on mv-hover */
  /* Re-enable arrow only inside the mobile dropdown panel */
  .nav-menu-arrow {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    overflow: hidden;
    width: 0;
    opacity: 0;
    transform: translateX(-100%);
    color: var(--el-violet-bright);
    transition:
      width  0.3s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.3s var(--ease-standard),
      transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }
  .nav-menu-arrow .nav-arrow-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: block;
  }

  /* Link: always at x:0 on mobile (no initial offset — only desktop has the slide-in) */
  .navbar .nav-links li a {
    flex: 1;
    transform: translateX(0) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s var(--ease-standard) !important;
    color: rgba(255,255,255,0.72) !important;
    background: none !important;
    font-weight: 500 !important;
    font-size: 1.05rem !important;
  }
  .navbar .nav-links li a.nav-active { color: var(--el-violet-bright) !important; }
  .navbar .nav-links li a.nav-cta {
    display: inline-flex !important;
    padding: 10px 24px !important;
    background: linear-gradient(135deg, var(--el-violet-deep), var(--el-violet)) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-radius: var(--radius-full) !important;
    transform: translateX(0) !important;
    margin-top: 4px;
    font-weight: 600 !important;
  }

  /* mv-hover: arrow slides in from left + text gets violet (no translateX needed since text is at 0) */
  .navbar .nav-links li.mv-hover .nav-menu-arrow {
    width: 36px;
    opacity: 1;
    transform: translateX(0);
  }
  .navbar .nav-links li.mv-hover > a {
    transform: translateX(8px) !important; /* slight nudge right when arrow appears */
    color: var(--el-violet-bright) !important;
  }
  .navbar .nav-links li.mv-hover > a.nav-cta {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    transform: translateX(8px) !important;
  }
}

@media (max-width: 640px) {
  .main-hero > .navbar,
  header.main-hero .navbar { width: calc(100% - 24px); padding: 10px 12px 10px 18px; }
}

/* Desktop: prevent any mv-hover transform/color leaking into horizontal inline navbar */
@media (min-width: 901px) {
  .navbar .nav-links li.mv-hover > a {
    transform: none !important;
    color: unset !important;
  }
  .navbar .nav-links li a {
    transform: none !important;
  }
}

/* Modern fullscreen sidebar nav (hamburger overlay) */
.modern-sidebar {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  z-index: var(--z-modal);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: all var(--transition-medium);
}
.modern-sidebar.active { opacity: 1; visibility: visible; pointer-events: auto; }
.sidebar-backdrop {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.95); backdrop-filter: blur(20px);
  opacity: 0; transition: opacity 0.3s var(--ease-standard); cursor: pointer;
}
.modern-sidebar.active .sidebar-backdrop { opacity: 1; }
.sidebar-content {
  position: absolute; top: 0; right: 0;
  width: 100%; max-width: 400px; height: 100vh;
  background: var(--el-bg-2);
  border-left: 1px solid var(--el-hairline);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  display: flex; flex-direction: column; overflow-y: auto;
}
.modern-sidebar.active .sidebar-content { transform: translateX(0); }
.sidebar-header {
  padding: var(--space-xl); border-bottom: 1px solid var(--el-hairline);
  display: flex; align-items: center; gap: var(--space-md);
}
.sidebar-header .logo {
  font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700;
  background: linear-gradient(120deg, #fff, var(--el-violet-bright));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: flex; align-items: center; gap: var(--space-sm);
}
.modern-sidebar .sidebar-nav { flex: 1; padding: var(--space-2xl) var(--space-xl); overflow-y: auto; }
.modern-sidebar .sidebar-nav ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-lg); }
.modern-sidebar .sidebar-nav li {
  display: flex !important; align-items: center !important;
  overflow: hidden !important; cursor: pointer !important;
  opacity: 0 !important; transform: translateX(30px) !important;
  transition: opacity var(--transition-medium), transform var(--transition-medium) !important;
}
.modern-sidebar.active .sidebar-nav li { opacity: 1 !important; transform: translateX(0) !important; }
.modern-sidebar .sidebar-nav li:nth-child(1)  { transition-delay: 0.08s; }
.modern-sidebar .sidebar-nav li:nth-child(2)  { transition-delay: 0.13s; }
.modern-sidebar .sidebar-nav li:nth-child(3)  { transition-delay: 0.18s; }
.modern-sidebar .sidebar-nav li:nth-child(4)  { transition-delay: 0.23s; }
.modern-sidebar .sidebar-nav li:nth-child(5)  { transition-delay: 0.28s; }
.modern-sidebar .sidebar-nav li:nth-child(6)  { transition-delay: 0.33s; }
.modern-sidebar .sidebar-nav li:nth-child(7)  { transition-delay: 0.38s; }
.modern-sidebar .sidebar-nav li:nth-child(8)  { transition-delay: 0.43s; }
.modern-sidebar .sidebar-nav li:nth-child(9)  { transition-delay: 0.48s; }
.modern-sidebar .sidebar-nav li:nth-child(10) { transition-delay: 0.53s; }
.modern-sidebar .sidebar-nav-arrow {
  flex-shrink: 0; width: 28px; height: 28px;
  color: var(--el-violet); transform: translateX(-110%); opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out; margin-right: 10px;
}
.modern-sidebar .sidebar-nav li:hover .sidebar-nav-arrow { transform: translateX(0); opacity: 1; }
.modern-sidebar .sidebar-nav a {
  display: block !important; color: rgba(255,255,255,0.65) !important;
  font-weight: 600 !important; font-size: clamp(1.5rem, 4vw, 2rem) !important;
  text-decoration: none !important; transform: translateX(-28px) !important;
  transition: transform 0.3s ease-out, color 0.3s ease-out !important;
  white-space: nowrap !important; background: none !important; padding: 0 !important;
}
.modern-sidebar .sidebar-nav li:hover a { transform: translateX(0) !important; color: var(--el-violet) !important; }
.modern-sidebar .sidebar-nav a::before { display: none !important; }
.sidebar-footer { padding: var(--space-xl); border-top: 1px solid var(--el-hairline); }
body.menu-open { overflow: hidden; }

/* ============================================================
   LAYOUT CONTAINERS
   ============================================================ */
.container       { max-width: var(--el-maxw); margin: 0 auto; padding: 0 var(--space-lg); }
.container-wide  { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-lg); }
.container-narrow { max-width: 800px; margin: 0 auto; padding: 0 var(--space-lg); }

.section    { padding: var(--space-3xl) 0; }
.section-sm { padding: var(--space-2xl) 0; }

/* ============================================================
   PAGE HEADER — identical on every inner page
   ============================================================ */
.page-header,
.download-header,
.pricing-header,
.bios-header,
.affiliate-header,
.faq-header,
.tos-header,
.documentation-header {
  text-align: center;
  margin-bottom: clamp(32px, 5vw, 56px);
  padding: 0 !important;
  background: none !important;
  border: none !important;
  position: relative;
  z-index: 2;
}

.page-header h1,
.download-header h1,
.pricing-header h1,
.bios-header h1,
.affiliate-header h1,
.faq-header h1,
.tos-header h1,
.documentation-header h1 {
  font-family: var(--font-heading) !important;
  font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.05 !important;
  /* Animated purple gradient — matches original site style */
  background: linear-gradient(
    135deg,
    #7534b3 0%,
    #8b1cfb 25%,
    #9147ff 50%,
    #b57bff 75%,
    #7534b3 100%
  ) !important;
  background-size: 200% 200% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: gradientShift 3s var(--ease-standard) infinite !important;
  margin-bottom: 12px !important;
}

.page-header p,
.download-header p,
.pricing-header p,
.bios-header p,
.affiliate-header p,
.faq-header p,
.tos-header p {
  color: rgba(255,255,255,0.55) !important;
  font-size: clamp(1rem, 1.5vw, 1.2rem) !important;
  max-width: 52ch;
  margin-inline: auto;
  line-height: 1.6;
  -webkit-text-fill-color: unset !important;
}

/* Accent underline divider */
.page-header::after,
.download-header::after,
.bios-header::after,
.affiliate-header::after,
.faq-header::after,
.tos-header::after {
  content: "";
  display: block;
  width: 48px; height: 2px;
  background: linear-gradient(90deg, var(--el-violet), transparent);
  margin: 22px auto 0;
}

/* ============================================================
   SECTION TITLES — consistent h2 sizing
   ============================================================ */
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: var(--space-lg);
  color: var(--text-light);
}
.section-title .accent {
  background: linear-gradient(120deg, var(--el-violet), var(--el-violet-bright) 50%, var(--el-violet));
  background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: gradientShift 6s var(--ease-standard) infinite;
}
.section-subtitle {
  color: var(--text-dim);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  max-width: 44rem;
  margin: 0 auto;
  line-height: 1.6;
}
.section-header { text-align: center; margin-bottom: var(--space-3xl); }

/* Eyebrow label above section titles */
.eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--el-violet-bright);
}
.eyebrow::before { content: "— "; color: var(--el-violet); }

/* ============================================================
   CARD — base glass surface
   border-radius: 16px, padding: 24px — canonical values
   ============================================================ */
.card,
.download-card,
.pricing-card,
.pricing-card-v2,
.tool-card,
.requirement,
.bios-step-card,
.bios-cap-card,
.bios-stat-card,
.bios-spec-card,
.bios-audience-card,
.changelog-entry,
.support-cta,
.faq-cta {
  position: relative;
  background: var(--el-card-bg) !important;
  border: 1px solid var(--el-card-border) !important;
  border-radius: var(--el-card-radius) !important;
  padding: 24px !important;
  box-shadow: var(--el-card-shadow) !important;
  transition: transform 0.35s var(--el-ease), border-color 0.35s var(--el-ease);
}

.card:hover,
.download-card:hover,
.pricing-card:hover,
.pricing-card-v2:hover,
.tool-card:hover,
.requirement:hover,
.bios-step-card:hover,
.bios-cap-card:hover,
.bios-stat-card:hover,
.bios-spec-card:hover,
.bios-audience-card:hover,
.changelog-entry:hover {
  transform: translateY(-3px);
  border-color: rgba(145,71,255,0.32) !important;
}

/* ============================================================
   CTA BUTTONS — primary gradient + secondary ghost
   ============================================================ */
.cta-button,
.btn-primary {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--space-md) var(--space-xl);
  background: linear-gradient(135deg, var(--el-violet-deep), var(--el-violet));
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-decoration: none;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 1rem;
  font-family: var(--font-body);
  cursor: pointer;
  position: relative;
  overflow: hidden; /* prevent magnetic-button .button-content from overflowing */
  transition: filter 0.25s var(--ease-standard), box-shadow 0.25s var(--ease-standard), transform 0.15s var(--ease-standard);
  box-shadow: 0 10px 30px -10px rgba(145,71,255,0.60), inset 0 1px 0 rgba(255,255,255,0.25);
  line-height: 1.3;
}

/* Inner span: main button label */
.cta-button > span { font-weight: 600; }
/* button-content wrapper injected by MagneticElements (modern.js) */
.cta-button > .button-content {
  display: contents; /* transparent wrapper — don't change layout */
  transform: none !important; /* block MagneticElements CSS fallback from moving content */
}
/* Inner small: price / subtitle line */
.cta-button > small {
  font-size: 0.72em;
  font-weight: 400;
  opacity: 0.82;
  letter-spacing: 0.01em;
}

.cta-button:hover,
.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 14px 40px -8px rgba(145,71,255,0.75), inset 0 1px 0 rgba(255,255,255,0.30);
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.cta-button:active,
.btn-primary:active {
  transform: translateY(1px) scale(0.985);
}

.cta-button.secondary,
.btn-secondary {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,0.14);
  box-shadow: none;
  color: var(--text-light) !important;
  -webkit-text-fill-color: var(--text-light) !important;
}
.cta-button.secondary:hover,
.btn-secondary:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
  filter: none;
  box-shadow: none;
  color: #fff;
}

.cta-button:focus-visible,
.btn-primary:focus-visible {
  outline: 2px solid rgba(var(--el-accent-rgb), 0.85);
  outline-offset: 3px;
}

/* ============================================================
   FOOTER — identical on every page
   ============================================================ */
.footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--el-hairline);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4));
  margin-top: auto;
}
.footer-column h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--text-light);
}
.footer-column ul { list-style: none; }
.footer-column ul li a {
  color: var(--text-dim);
  transition: color 0.2s var(--el-ease);
  font-size: 0.9rem;
}
.footer-column ul li a:hover { color: var(--el-violet-bright); }
.footer-logo { filter: drop-shadow(0 0 14px rgba(145,71,255,0.5)); }

/* ============================================================
   DOWNLOAD CARDS
   (extend .card with download-specific details)
   ============================================================ */
.download-card {
  padding: 28px !important;
  overflow: hidden;
}

.download-card.featured {
  border-color: rgba(145,71,255,0.35) !important;
  background: linear-gradient(160deg, rgba(109,40,217,0.18), rgba(14,11,26,0.70)) !important;
}

.card-header {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 16px;
}
.card-header h3 {
  font-family: var(--font-heading) !important;
  font-size: 1.25rem !important;
  color: rgba(255,255,255,0.95) !important;
  -webkit-text-fill-color: unset !important;
  margin-bottom: 4px !important;
}
.card-body { padding: 0 !important; background: none !important; border: none !important; }
.card-footer { text-align: center; margin-top: 20px; }

.version-tag {
  display: inline-block;
  background: rgba(145,71,255,0.15);
  border: 1px solid rgba(145,71,255,0.30);
  color: var(--el-violet-bright) !important;
  -webkit-text-fill-color: unset !important;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  margin-top: 4px;
}

.featured-badge {
  display: block;
  width: fit-content;
  background: linear-gradient(135deg, var(--el-violet-deep), var(--el-violet));
  color: #fff !important;
  -webkit-text-fill-color: unset !important;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 12px;
  margin-bottom: 14px;
}

.features-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 !important;
}
.features-list li {
  color: rgba(255,255,255,0.65) !important;
  font-size: 0.875rem !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex; align-items: center; gap: 8px;
  -webkit-text-fill-color: unset !important;
}
.features-list li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--el-violet);
  flex-shrink: 0;
}

.system-requirements {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 10px !important;
  padding: 14px !important;
  margin-top: 16px;
}
.system-requirements h4 {
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--el-violet-bright) !important;
  -webkit-text-fill-color: unset !important;
  margin-bottom: 10px !important;
}
.system-requirements p,
.system-requirements li {
  color: rgba(255,255,255,0.55) !important;
  font-size: 0.8rem !important;
  line-height: 1.6 !important;
  -webkit-text-fill-color: unset !important;
}

.download-card .cta-button { margin-top: 20px; width: 100%; justify-content: center; }
.download-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 8px;
}

/* ============================================================
   PRICING CARDS
   ============================================================ */
.pricing-card {
  padding: 30px !important;
  text-align: center;
  overflow: visible;
}
.pricing-card.featured,
.pricing-card.popular,
.pricing-card.highlight,
.pricing-card.recommended {
  border-color: rgba(145,71,255,0.5) !important;
  background:
    radial-gradient(500px 300px at 50% 0%, rgba(145,71,255,0.16), transparent 60%),
    var(--el-surface-strong) !important;
}
.pricing-card.featured { transform: scale(1.02); }
.pricing-card.featured:hover { transform: scale(1.02) translateY(-5px); }

.price,
.pricing-card .price {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 700;
  background: linear-gradient(120deg, #fff, var(--el-violet-bright));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 20px;
}
.price span { font-size: 1.5rem; color: var(--text-dim); font-weight: 400; -webkit-text-fill-color: unset; }

/* ============================================================
   BIOS TWEAKER CARDS
   ============================================================ */

/* Step cards */
.bios-step-card {
  padding: 24px 22px !important;
  transition: border-color 0.3s var(--ease-standard), transform 0.3s var(--ease-standard) !important;
}
.bios-step-number {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--el-violet-deep), var(--el-violet));
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 14px;
}
.bios-step-card h3 {
  font-family: var(--font-heading) !important;
  font-size: 1rem !important;
  color: rgba(255,255,255,0.9) !important;
  -webkit-text-fill-color: unset !important;
  margin-bottom: 8px !important;
}
.bios-step-card p {
  color: rgba(255,255,255,0.55) !important;
  font-size: 0.85rem !important;
  line-height: 1.65 !important;
  -webkit-text-fill-color: unset !important;
  margin: 0 !important;
}

/* Capability cards */
.bios-cap-card {
  padding: 20px !important;
  transition: border-color 0.3s var(--ease-standard), transform 0.3s var(--ease-standard) !important;
}
.bios-cap-card h3 {
  font-family: var(--font-heading) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--el-violet-bright) !important;
  -webkit-text-fill-color: unset !important;
  margin-bottom: 10px !important;
}
.bios-cap-card p {
  color: rgba(255,255,255,0.55) !important;
  font-size: 0.83rem !important;
  line-height: 1.65 !important;
  -webkit-text-fill-color: unset !important;
  margin: 0 !important;
}

/* Stat cards */
.bios-stat-card {
  text-align: center;
  padding: 24px 20px !important;
}
.bios-stat-value {
  font-family: var(--font-heading) !important;
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  background: linear-gradient(120deg, #fff, var(--el-violet-bright));
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  line-height: 1.1 !important;
  margin-bottom: 8px !important;
}
.bios-stat-card h3 {
  font-family: var(--font-heading) !important;
  font-size: 0.85rem !important;
  color: rgba(255,255,255,0.60) !important;
  -webkit-text-fill-color: unset !important;
  margin: 0 !important;
}

/* Spec / audience cards */
.bios-spec-card,
.bios-audience-card {
  padding: 20px !important;
  transition: border-color 0.3s var(--ease-standard), transform 0.3s var(--ease-standard) !important;
}
.bios-spec-card h3,
.bios-audience-card h3 {
  font-family: var(--font-heading) !important;
  font-size: 0.95rem !important;
  color: rgba(255,255,255,0.9) !important;
  -webkit-text-fill-color: unset !important;
  margin-bottom: 8px !important;
}
.bios-spec-card p,  .bios-audience-card p,
.bios-spec-card li, .bios-audience-card li {
  color: rgba(255,255,255,0.55) !important;
  font-size: 0.84rem !important;
  line-height: 1.6 !important;
  -webkit-text-fill-color: unset !important;
}

/* BIOS card grids */
.bios-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px; margin-top: 8px;
}
.bios-capabilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-top: 8px;
}
.bios-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-top: 8px;
}
.bios-specs-grid,
.bios-audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; margin-top: 8px;
}
@media (max-width: 820px) { .bios-capabilities-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 700px) { .bios-stat-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .bios-capabilities-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-item {
  background: none !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  cursor: pointer;
  transition: border-color 0.3s var(--el-ease);
  margin-bottom: 0;
}
.faq-item:first-child { border-top: 1px solid rgba(255,255,255,0.07); }
.faq-item:hover { border-bottom-color: rgba(145,71,255,0.30) !important; }

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 4px;
  gap: 16px;
}
.faq-question h3 {
  font-family: var(--font-heading) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.88) !important;
  -webkit-text-fill-color: unset !important;
  margin: 0 !important;
  line-height: 1.4;
}

.faq-icon {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(145,71,255,0.4);
  background: rgba(145,71,255,0.10);
  color: var(--el-violet-bright);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; line-height: 1;
  transition: background 0.25s, transform 0.25s;
}
/* Plus/minus icon via CSS pseudo-elements */
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: var(--el-violet-bright);
  transition: all 0.3s var(--ease-standard);
}
.faq-icon::before { width: 12px; height: 2px; }
.faq-icon::after  { width: 2px; height: 12px; }
.faq-item.active .faq-icon {
  background: linear-gradient(135deg, var(--el-violet-deep), var(--el-violet));
  color: #fff;
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 4px 22px;
  display: none;
}
.faq-item.active .faq-answer { display: block; }
.faq-answer p {
  color: rgba(255,255,255,0.60) !important;
  font-size: 0.9rem !important;
  line-height: 1.75 !important;
  -webkit-text-fill-color: unset !important;
  margin: 0 !important;
}
.faq-answer ul, .faq-answer ol { padding: 0 0 0 20px; margin: 10px 0; }
.faq-answer li { color: rgba(255,255,255,0.60); font-size: 0.9rem; margin-bottom: 6px; }

.faq-content { max-width: 760px; margin: 0 auto; }
.faq-cta { text-align: center; padding: 40px !important; border: 1px solid rgba(145,71,255,0.25) !important; }

/* ============================================================
   STEP — numbered instruction step
   ============================================================ */
.step {
  display: flex;
  gap: 20px;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 20px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: none !important;
}
.step:last-child { border-bottom: none; }

.step-number {
  display: flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--el-violet-deep), var(--el-violet));
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0.9rem;
}
.step-content { flex: 1; }
.step-content h3 {
  color: rgba(255,255,255,0.92);
  margin-bottom: 8px;
  font-size: 1.05rem;
}
.steps-container { display: flex; flex-direction: column; gap: 0; margin: 24px 0; }

/* ============================================================
   DOCUMENTATION SIDEBAR
   ============================================================ */
.documentation-sidebar {
  background: var(--el-surface-strong) !important;
  border: 1px solid var(--el-hairline) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  height: fit-content;
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  box-shadow: var(--el-shadow-card) !important;
}
/* Docs sidebar nav — all detail handled by docs.css; just reset modern-sidebar overrides */
.documentation-sidebar .sidebar-nav a {
  display: block !important;
  background: none !important;
  border-radius: 0 !important;
  transform: none !important;
  white-space: nowrap !important;
}
.documentation-sidebar .sidebar-nav a:hover { background: none !important; transform: none !important; }
.documentation-sidebar .sidebar-nav a.active,
.documentation-sidebar .sidebar-nav a.doc-active { background: none !important; }
.documentation-sidebar .sidebar-nav h3 { -webkit-text-fill-color: unset !important; }
.documentation-sidebar .sidebar-nav ul { list-style: none !important; margin: 0 !important; }
.documentation-sidebar .sidebar-nav li { margin-bottom: 0 !important; display: block !important; opacity: 1 !important; transform: none !important; transition: none !important; }
/* Allow li::before (the timeline dot) to render — controlled by docs.css */
.documentation-sidebar .sidebar-nav li::before { display: none !important; }
/* But allow the a::before (the actual dot on the link) from docs.css */

/* ============================================================
   WEBGL BACKGROUND
   ============================================================ */
.webgl-background {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1; opacity: 0;
  transition: opacity var(--transition-slow);
}
.webgl-background.visible { opacity: 1; }
.webgl-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
/* shader opacity consolidated in vitality-ui.css (--v-shader-max) */

/* ============================================================
   PRELOADER
   ============================================================ */
body:not(.loaded) > *:not(.preloader) { opacity: 0 !important; visibility: hidden !important; }

.preloader {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: transparent;
  z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  transition: opacity var(--transition-medium);
}
.preloader-hidden {
  opacity: 0 !important; pointer-events: none !important;
  visibility: hidden !important; display: none !important;
}
.preloader-content { text-align: center; max-width: 300px; }
.preloader-logo {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 700;
  background: linear-gradient(135deg, #7534b3 0%, #9147ff 50%, #b57bff 100%);
  background-size: 200% 200%;
  background-clip: text; -webkit-background-clip: text; color: transparent;
  animation: gradientShift 3s var(--ease-standard) infinite;
  margin-bottom: var(--space-xl);
}
.preloader-counter { font-size: 0.8rem; color: rgba(145,71,255,0.7); font-weight: 600; letter-spacing: 0.15em; }

body.loaded .preloader { opacity: 0; pointer-events: none; visibility: hidden; }
/* #vitality-shader-bg excluded: its opacity is animated by vitality-ui.css
   (--v-shader-max) — forcing it to 1 here made the plasma pop in at full
   brightness after the preloader, visibly shifting the page tone. */
body.loaded > *:not(.preloader):not(#vitality-shader-bg) { opacity: 1 !important; visibility: visible !important; }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.custom-cursor {
  position: fixed; top: 0; left: 0;
  width: 16px; height: 16px;
  background: var(--el-violet);
  border-radius: 50%; pointer-events: none;
  z-index: var(--z-tooltip); mix-blend-mode: difference;
  transition: all var(--transition-fast);
  transform: translate(-50%, -50%);
}
.cursor-follower {
  position: fixed; top: 0; left: 0;
  width: 40px; height: 40px;
  border: 2px solid var(--el-violet);
  border-radius: 50%; pointer-events: none;
  z-index: var(--z-tooltip);
  transition: all var(--transition-medium);
  transform: translate(-50%, -50%);
}
@media (hover: none) and (pointer: coarse) {
  .custom-cursor, .cursor-follower { display: none; }
}

/* ============================================================
   FOCUS VISIBILITY
   ============================================================ */
a:focus-visible,
button:focus-visible,
.cta-button:focus-visible {
  outline: 2px solid var(--el-violet-bright);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ============================================================
   MOBILE — cross-page responsive
   ============================================================ */
@media (max-width: 900px) {
  /* ---- Modern sidebar: full-screen on mobile ---- */
  .sidebar-content {
    max-width: 100% !important;
    border-left: none !important;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Fix: links have translateX(-28px) default (only resets on hover),
     on touch there's no hover so reset the transform immediately */
  .modern-sidebar .sidebar-nav a {
    transform: translateX(0) !important;
    font-size: clamp(1.1rem, 5vw, 1.5rem) !important;
    padding: 14px 0 !important;
    color: rgba(255,255,255,0.75) !important;
  }
  /* Hide the arrow icons on mobile — no hover state on touch */
  .modern-sidebar .sidebar-nav-arrow { display: none !important; }

  /* Slightly looser gap between items on mobile */
  .modern-sidebar .sidebar-nav ul { gap: 0 !important; }
  .modern-sidebar .sidebar-nav li { padding: 0 !important; }

  /* Separator between items */
  .modern-sidebar .sidebar-nav li + li {
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    margin: 0 !important;
  }

  /* Sidebar header: smaller on mobile */
  .sidebar-header { padding: 20px 24px !important; }
  .sidebar-header .logo { font-size: 1.1rem !important; }
  .modern-sidebar .sidebar-nav { padding: 8px 24px !important; }
  .sidebar-footer { padding: 20px 24px !important; }

  /* Mobile nav-links dropdown — shown when body.nav-open is added by nav-toggle */
  /* (styles are in the @media (max-width: 900px) block below — do not override here) */
}

/* Arrow injected by MenuVertical — hidden everywhere by default, shown only in mobile dropdown */
.nav-menu-arrow { display: none !important; }

/* ============================================================
   SPOTLIGHT CARD (GlowCard) — port of the React data-glow component
   Tracks pointer position via --x/--y CSS vars set by elevated.js.
   Apply [data-glow] attribute to any card to enable the effect.
   ============================================================ */

/* Base spotlight: radial gradient that follows the cursor, only visible on hover */
[data-glow] {
  --base:    265;          /* purple */
  --spread:  70;           /* stays inside purple -> magenta/pink, never cyan/blue */
  --radius:  16;
  --border:  2;
  --size:    260;
  --outer:   1;
  --backdrop: rgba(14, 11, 26, 0.55);
  --backup-border: rgba(145, 71, 255, 0.22);
  --border-size:    calc(var(--border, 2) * 1px);
  --spotlight-size: calc(var(--size, 200) * 1px);
  --hue: calc(var(--base) + (var(--xp, 0) * var(--spread, 0)));

  border: var(--border-size) solid var(--backup-border);
  position: relative;
}

[data-glow]:hover {
  background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(var(--hue) 100% 70% / 0.13),
    transparent
  );
}

/* Glowing border that tracks the cursor — hidden until hovered, traces the border ring only */
[data-glow]::before,
[data-glow]::after {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -1);
  border: var(--border-size) solid transparent;
  border-radius: calc(var(--radius) * 1px);
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.4s var(--ease-standard);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
}

[data-glow]:hover::before,
[data-glow]:hover::after,
[data-glow]:focus-within::before,
[data-glow]:focus-within::after {
  opacity: 1;
}

/* Colored border glow (hue-shifted, follows cursor) — large soft pool so a
   generous segment of the border lights up around the pointer, not just a corner */
[data-glow]::before {
  background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(var(--hue) 90% 62% / 0.95),
    hsl(var(--hue) 85% 55% / 0.35) 45%,
    transparent 75%
  );
}

/* Tighter, brighter core right at the pointer so the leading edge of the
   border reads as a crisp highlight, still on-theme (magenta-pink, not white) */
[data-glow]::after {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.45) calc(var(--spotlight-size) * 0.45) at
    calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(calc(var(--hue) + 20) 100% 78% / 0.9),
    transparent 80%
  );
}

/* Inner nested glow element (creates the outer soft bloom) */
[data-glow] > [data-glow-inner] {
  position: absolute;
  inset: 0;
  will-change: filter;
  opacity: var(--outer, 1);
  border-radius: calc(var(--radius) * 1px);
  border-width: calc(var(--border-size) * 20);
  filter: blur(calc(var(--border-size) * 10));
  background: none;
  pointer-events: none;
  border: none;
  z-index: 0;
}

/* Disable glow on mobile — performance */
@media (hover: none), (pointer: coarse) {
  [data-glow]::before,
  [data-glow]::after { display: none; }
  [data-glow] { background-image: none !important; }
}

/* ---- Prevent text selection on all navigation elements ---- */
.navbar,
.nav-links,
.nav-links li,
.nav-links li a,
.nav-toggle,
.modern-sidebar,
.sidebar-nav,
.sidebar-nav ul,
.sidebar-nav li,
.sidebar-nav a,
.sidebar-header,
.sidebar-footer {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* ---- Lusion sidebar: hidden on ALL touch/mobile devices ---- */
@media (max-width: 1024px) { .lusion-sidebar { display: none !important; } }
@media (hover: none)       { .lusion-sidebar { display: none !important; } }
@media (pointer: coarse)   { .lusion-sidebar { display: none !important; } }

@media (max-width: 768px) {
  /* shader canvas stays visible on mobile — user wants it on all pages/devices */
  .webgl-background { display: none !important; } /* THREE.js WebGL, not the shader canvas */
  .download-options { grid-template-columns: 1fr; }

  /* CTA buttons: full width on mobile */
  .hero-cta .cta-button, .final-cta-buttons .cta-button {
    width: 100%;
    max-width: 320px;
  }
  .hero-cta-container, .hero-cta, .final-cta-buttons {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 640px) {
  .container,
  .container-wide,
  .container-narrow { padding-left: 18px; padding-right: 18px; }
  .bios-capabilities-grid { grid-template-columns: 1fr; }
  .bios-stat-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER LAYOUT — complete grid + column + logo
   ============================================================ */
.footer {
  padding: var(--space-3xl) 0 var(--space-2xl);
}
.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2xl);
  max-width: var(--el-maxw);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}
.footer-column {
  display: flex;
  flex-direction: column;
}
.footer-logo {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-md);
  flex-shrink: 0;
}
.footer-column h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-light);
  margin-bottom: var(--space-md);
}
.footer-column p {
  color: var(--text-dim);
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: var(--space-sm);
}
.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-column li {
  margin-bottom: var(--space-sm);
}
.footer-column a {
  color: var(--text-dim);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.2s var(--el-ease);
}
.footer-column a:hover { color: var(--el-violet-bright); }
.footer-bottom {
  border-top: 1px solid var(--el-hairline);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
}
@media (max-width: 640px) {
  .footer-container { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
}
@media (max-width: 400px) {
  .footer-container { grid-template-columns: 1fr; }
}

/* ============================================================
   HERO CONTENT — centering (was in modern-styles.css)
   ============================================================ */
.hero-content {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.hero-text-content {
  color: var(--text-light);
  max-width: 860px;
  text-align: center;
}
.hero-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
}

/* ============================================================
   PERFORMANCE SECTION LAYOUT (was in modern-styles.css)
   ============================================================ */
.performance-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
  margin-top: var(--space-2xl);
}
.performance-image { text-align: center; }
.performance-image img { max-width: 100%; height: auto; border-radius: var(--radius-lg); }
/* ---- FPS Bars (performance section) ---- */
.fps-bar {
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
  height: 40px;
}
.fps-bar .with-vitality,
.fps-bar .without-vitality {
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: #fff;
  border-radius: 12px;
  height: 100%;
  width: 0%;
  white-space: nowrap;
  overflow: visible;
  min-width: max-content;
  transition: width 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.fps-bar .with-vitality {
  background: linear-gradient(90deg, var(--el-violet-deep), var(--el-violet));
  box-shadow: var(--el-glow-violet);
}
.fps-bar .without-vitality {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
}

/* ---- Boost percentage ---- */
.boost-percentage {
  font-family: var(--font-heading);
  background: linear-gradient(120deg, var(--el-violet), var(--el-violet-bright));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-size: inherit;
  font-weight: 700;
}

.game-selection { margin-bottom: var(--space-xl); }
.game-selection h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: var(--space-md); color: var(--text-light); }

/* Hide the native select — JS replaces it with .custom-select */
.game-selection select { display: none; }

/* ---- Custom dropdown ---- */
.custom-select {
  position: relative;
  width: 100%;
  user-select: none;
  font-family: var(--font-body);
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  background: var(--el-card-bg);
  border: 1px solid var(--el-card-border);
  border-radius: 14px;
  color: var(--text-light);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.25s var(--ease-standard), background 0.25s var(--ease-standard), box-shadow 0.25s var(--ease-standard);
}
.custom-select-trigger:hover {
  border-color: rgba(145,71,255,0.4);
  background: rgba(20,14,36,0.85);
}
.custom-select.open .custom-select-trigger {
  border-color: var(--el-violet);
  box-shadow: 0 0 0 3px rgba(145,71,255,0.15);
  border-radius: 14px 14px 0 0;
}

/* Chevron arrow */
.custom-select-trigger::after {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='rgba(181,123,255,0.8)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.custom-select.open .custom-select-trigger::after {
  transform: rotate(180deg);
}

/* Dropdown options panel */
.custom-select-options {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--el-card-bg);
  border: 1px solid var(--el-violet);
  border-top: 1px solid rgba(145,71,255,0.25);
  border-radius: 0 0 14px 14px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.2s var(--ease-standard);
  z-index: 100;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(145,71,255,0.1);
}
.custom-select.open .custom-select-options {
  max-height: 240px;
  opacity: 1;
  pointer-events: auto;
}

.custom-select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  color: rgba(255,255,255,0.75);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s var(--ease-standard), color 0.15s var(--ease-standard);
  position: relative;
}
.custom-select-option::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--el-violet);
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 0.15s var(--ease-standard);
}
.custom-select-option:hover {
  background: rgba(145,71,255,0.12);
  color: #fff;
}
.custom-select-option:hover::before { opacity: 1; }
.custom-select-option.selected {
  color: var(--el-violet-bright);
  background: rgba(145,71,255,0.08);
}
.custom-select-option.selected::before { opacity: 1; background: var(--el-violet-bright); }
.fps-comparison { margin-bottom: var(--space-lg); }
.disclaimer { color: var(--text-muted); font-size: 0.875rem; font-style: italic; text-align: center; margin-top: var(--space-lg); }
@media (max-width: 768px) {
  .performance-content { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* ============================================================
   HOMEPAGE SECTION EXTRAS (was in modern-styles.css)
   ============================================================ */
/* How It Works preview */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}
.step-card {
  background: var(--el-surface);
  backdrop-filter: blur(16px);
  padding: var(--space-xl);
  border-radius: var(--el-card-radius);
  border: 1px solid var(--el-hairline);
  text-align: center;
  transition: transform 0.4s var(--el-ease), border-color 0.4s var(--el-ease);
}
.step-card:hover { transform: translateY(-5px); border-color: var(--el-violet); }
.step-card .step-number {
  width: 60px; height: 60px;
  background: linear-gradient(135deg, var(--el-violet-deep), var(--el-violet));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 700; color: #fff;
  margin: 0 auto var(--space-lg);
}
.step-card h3 { font-size: 1.25rem; margin-bottom: var(--space-md); color: var(--text-light); }
.step-card p { color: var(--text-dim); font-size: 0.9375rem; }

/* Pricing preview */
.pricing-preview-section { padding: var(--space-3xl) 0; }
.pricing-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
  max-width: 900px;
  margin: var(--space-2xl) auto 0;
}
.pricing-preview-card {
  background: var(--el-surface);
  backdrop-filter: blur(16px);
  padding: var(--space-2xl);
  border-radius: var(--el-card-radius);
  border: 1px solid var(--el-hairline);
  text-align: center; position: relative;
  transition: transform 0.4s var(--el-ease), border-color 0.4s var(--el-ease);
}
.pricing-preview-card:hover { transform: translateY(-5px); border-color: var(--el-violet); }
.pricing-preview-card.featured { border-color: var(--el-violet); border-width: 2px; }
.pricing-preview-card h3 { font-size: 1.5rem; margin-bottom: var(--space-md); color: var(--text-light); }
.pricing-preview-card .price { font-size: 2.5rem; font-weight: 700; color: var(--el-violet); margin-bottom: var(--space-xs); }
.price-note { color: var(--text-dim); font-size: 0.875rem; margin-bottom: var(--space-lg); }
.pricing-features { list-style: none; padding: 0; margin: 0 0 var(--space-xl); text-align: left; }
.pricing-features li { color: var(--text-dim); padding: var(--space-sm) 0 var(--space-sm) var(--space-lg); position: relative; }
.pricing-features li::before { content: "✓"; position: absolute; left: 0; color: var(--el-violet); font-weight: 700; }
.pricing-note { text-align: center; color: var(--text-dim); margin-top: var(--space-xl); font-size: 0.9375rem; }
.pricing-note a { color: var(--el-violet); }
.pricing-note a:hover { text-decoration: underline; }
.section-cta { text-align: center; margin-top: var(--space-2xl); }

/* FAQ preview */
.faq-preview-section { padding: var(--space-3xl) 0; }
.faq-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}
.faq-preview-item {
  background: var(--el-surface);
  backdrop-filter: blur(16px);
  padding: var(--space-xl);
  border-radius: var(--el-card-radius);
  border: 1px solid var(--el-hairline);
  transition: transform 0.4s var(--el-ease), border-color 0.4s var(--el-ease);
}
.faq-preview-item:hover { transform: translateY(-3px); border-color: var(--el-hairline-strong); }
.faq-preview-item h3 { font-size: 1.125rem; margin-bottom: var(--space-md); color: var(--text-light); font-weight: 600; }
.faq-preview-item p { color: var(--text-dim); font-size: 0.9375rem; line-height: 1.6; margin: 0; }

/* Feature link */
.feature-link {
  display: inline-block;
  margin-top: var(--space-md);
  color: var(--el-violet);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
  transition: all var(--transition-fast);
}
.feature-link:hover { color: var(--el-violet-bright); transform: translateX(5px); }

/* Feature bullets */
.feature-bullets { list-style: none; padding: 0; margin: var(--space-md) 0; text-align: left; }
.feature-bullets li { color: var(--text-dim); font-size: 0.875rem; padding: var(--space-xs) 0 var(--space-xs) var(--space-lg); position: relative; }
.feature-bullets li::before { content: "•"; position: absolute; left: 0; color: var(--el-violet); font-weight: 700; }

/* About column list styles (was in modern-styles.css) */
.about-column ol { list-style: decimal; padding-left: var(--space-lg); margin: var(--space-md) 0; }
.about-column ol li { margin-bottom: var(--space-sm); line-height: 1.7; color: var(--text-dim); }
.about-column ol li strong { color: var(--text-light); }
.about-column ul { color: var(--text-dim); line-height: 1.6; padding-left: var(--space-lg); }
.about-column li { margin-bottom: var(--space-sm); }

/* ============================================================
   MENU-TOGGLE SVG ANIMATION (hamburger icon)
   ============================================================ */
.menu-toggle-svg {
  width: 26px;
  height: 26px;
  color: var(--text-light);
  transition: transform 500ms ease-in-out;
  display: block;
}
.menu-toggle.active .menu-toggle-svg {
  transform: rotate(-45deg);
}
.menu-toggle-svg .menu-svg-path {
  stroke-dasharray: 12 63;
  transition: stroke-dasharray 500ms ease-in-out, stroke-dashoffset 500ms ease-in-out;
}
.menu-toggle.active .menu-toggle-svg .menu-svg-path {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42px;
}

/* ============================================================
   TEXT REVEAL ANIMATION — characters animated in
   ============================================================ */
.text-char {
  display: inline-block;
  will-change: opacity, transform;
}
.text-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

/* ============================================================
   PAGE TRANSITION overlay (disabled — avoids black flash)
   ============================================================ */
.page-transition { display: none !important; }

/* ============================================================
   PRELOADER — ensure it disappears cleanly
   ============================================================ */
.preloader-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  display: none !important;
}
body.loaded .preloader {
  opacity: 0 !important;
  pointer-events: none;
  visibility: hidden;
}

/* ============================================================
   CARD FOOTER — for download page buttons
   ============================================================ */
.card-footer { margin-top: 20px; text-align: center; }
.card-footer .cta-button { width: 100%; justify-content: center; }

/* ============================================================
   DOWNLOAD OPTIONS — single-column variant
   ============================================================ */
.download-options-single {
  max-width: 480px;
  margin: 20px auto 0;
}

/* ============================================================
   JOIN DISCORD / MISC BUTTONS — ensure readable text
   Discord-blue branding only applies to primary (non-ghost) buttons.
   .secondary discord links (e.g. "Get Support") keep the standard
   ghost style so they match the rest of the site's purple theme.
   ============================================================ */
.cta-button.discord:not(.secondary),
a[href*="discord"].cta-button:not(.secondary) {
  background: #5865f2;
  box-shadow: 0 8px 20px -8px rgba(88,101,242,0.6);
}
.cta-button.discord:not(.secondary):hover,
a[href*="discord"].cta-button:not(.secondary):hover { filter: brightness(1.1); }

/* ===== cursor.css ===== */
/* ============================================================
   CUSTOM CURSOR
   A small dot that tracks the pointer 1:1, plus a trailing ring
   that eases toward it and reacts to interactive elements.
   Disabled on touch/coarse pointers and prefers-reduced-motion.
   ============================================================ */

html.vit-cursor-active,
html.vit-cursor-active * {
  cursor: none !important;
}

.vit-cursor-dot,
.vit-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}

.vit-cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--el-violet-bright, #b57bff);
  box-shadow: 0 0 12px rgba(145, 71, 255, 0.8);
  transition: opacity 0.2s var(--ease-standard), width 0.2s var(--ease-standard), height 0.2s var(--ease-standard);
}

.vit-cursor-ring {
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(145, 71, 255, 0.55);
  background: rgba(145, 71, 255, 0.06);
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s var(--ease-standard),
              background 0.25s var(--ease-standard),
              opacity 0.2s var(--ease-standard);
}

/* Hover state — grows and fills when over interactive elements */
html.vit-cursor-active.vit-cursor-hover .vit-cursor-ring {
  width: 64px;
  height: 64px;
  border-color: rgba(181, 123, 255, 0.8);
  background: rgba(145, 71, 255, 0.12);
}
html.vit-cursor-active.vit-cursor-hover .vit-cursor-dot {
  opacity: 0;
}

/* Pressed state — quick squeeze for tactile feedback */
html.vit-cursor-active.vit-cursor-down .vit-cursor-ring {
  width: 30px;
  height: 30px;
}

/* Hide on first paint until the pointer moves, and on coarse/touch pointers */
.vit-cursor-dot,
.vit-cursor-ring {
  opacity: 0;
}
html.vit-cursor-active .vit-cursor-dot,
html.vit-cursor-active .vit-cursor-ring {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .vit-cursor-dot,
  .vit-cursor-ring {
    display: none !important;
  }
  html.vit-cursor-active,
  html.vit-cursor-active * {
    cursor: auto !important;
  }
}

/* ===== cairn-site.css ===== */
/* ============================================================
   VITALITY — Cairn × legacy merge (site-wide)
   Full navbar, editorial type, cleaner inner pages.
   Load after components.css on every page.
   ============================================================ */

/* Fonts (Hanken Grotesk, Instrument Serif) are loaded via <link> in each page's
   <head>, not @import. An @import here would both delay first paint and become
   invalid once this file is concatenated into a bundle. */

body.cairn-site {
  --cr-bg: #05050a;
  --cr-ink: #f2eefc;
  --cr-muted: rgba(242, 238, 252, 0.62);
  --cr-hairline: rgba(255, 255, 255, 0.1);
  --cr-accent: #9147ff;
  --cr-accent-soft: #cdb2ff;
  --font-cr-sans: 'Hanken Grotesk', var(--font-body);
  --font-cr-serif: 'Instrument Serif', Georgia, serif;
  font-family: var(--font-cr-sans);
  color: var(--cr-ink);
}

/* shader opacity consolidated in vitality-ui.css (--v-shader-max) */

/* ---- Navbar: Copy(2) elevated pill + icon logo ---- */
body.cairn-site .navbar .logo a {
  display: flex;
  align-items: center;
  gap: 10px;
}
body.cairn-site .navbar .logo img.logo-icon {
  width: 30px;
  height: 30px;
  display: block;
  filter: drop-shadow(0 0 10px rgba(145, 71, 255, 0.45));
  transition: transform 0.25s var(--ease-standard), filter 0.25s var(--ease-standard);
}
body.cairn-site .navbar .logo a:hover img.logo-icon {
  transform: scale(1.08) rotate(-4deg);
  filter: drop-shadow(0 0 16px rgba(145, 71, 255, 0.7));
}
body.cairn-site .cr-nav-download { display: none !important; }

/* ---- Kill the white corner: remove the inset top-highlight on every card ----
   --el-shadow-card has `inset 0 1px 0 rgba(255,255,255,.06)` which leaves bright
   white nubs at the rounded corners. Replace with a clean soft shadow + purple hairline. */
body.cairn-site .feature-item,
body.cairn-site .about-column,
body.cairn-site .pricing-card-v2,
body.cairn-site .download-card,
body.cairn-site .faq-item,
body.cairn-site .step,
body.cairn-site .card,
body.cairn-site .tool-card,
body.cairn-site .bios-step-card,
body.cairn-site .bios-cap-card,
body.cairn-site .bios-stat-card,
body.cairn-site .bios-audience-card,
body.cairn-site .bios-spec-card,
body.cairn-site .bios-feature-card,
body.cairn-site .vx-card,
body.cairn-site .affiliate-step,
body.cairn-site .tos-section {
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.8) !important;
  border: 1px solid rgba(145, 71, 255, 0.14) !important;
}

body.cairn-site .feature-item:hover,
body.cairn-site .pricing-card-v2:hover,
body.cairn-site .download-card:hover,
body.cairn-site .vx-card:hover,
body.cairn-site .bios-feature-card:hover,
body.cairn-site .card:hover,
body.cairn-site .tool-card:hover {
  border-color: rgba(145, 71, 255, 0.42) !important;
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.85), 0 0 30px -10px rgba(145, 71, 255, 0.4) !important;
}

/* The injected .glowing-effect divs have no backing CSS — keep them inert/hidden */
body.cairn-site .glowing-effect { display: none !important; }

/* ---- Inner pages ---- */
body.cairn-site.inner-page .page-header h1,
body.cairn-site.inner-page .bios-header h1,
body.cairn-site.inner-page .affiliate-header h1,
body.cairn-site.inner-page .faq-header h1,
body.cairn-site.inner-page .tos-header h1,
body.cairn-site.inner-page .download-header h1 {
  font-family: var(--font-cr-sans) !important;
  font-weight: 600 !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  animation: none !important;
  letter-spacing: -0.03em !important;
}

body.cairn-site.inner-page .page-header h1 em,
body.cairn-site.inner-page .download-header h1 em {
  font-family: var(--font-cr-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--cr-accent-soft);
}

body.cairn-site.inner-page .page-header p,
body.cairn-site.inner-page .download-header p,
body.cairn-site.inner-page .faq-header p,
body.cairn-site.inner-page .bios-header p,
body.cairn-site.inner-page .affiliate-header p,
body.cairn-site.inner-page .tos-header p {
  color: var(--cr-muted) !important;
}

body.cairn-site .download-card,
body.cairn-site .pricing-card-v2,
body.cairn-site .bios-feature-card,
body.cairn-site .faq-item,
body.cairn-site .affiliate-step,
body.cairn-site .tos-section {
  border-radius: 20px;
  border-color: var(--cr-hairline);
  background: linear-gradient(180deg, rgba(14, 12, 20, 0.82), rgba(8, 8, 12, 0.9));
}

body.cairn-site .cta-button:not(.secondary) {
  background: linear-gradient(135deg, var(--el-violet-deep), var(--el-violet)) !important;
  color: #fff !important;
  box-shadow: 0 0 24px -6px rgba(145, 71, 255, 0.45) !important;
}

body.cairn-site .cta-button.secondary {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #fff !important;
}

/* Hero + final CTAs stay on-brand purple */
body.cairn-site.cairn-home .cr-btn-primary {
  background: linear-gradient(135deg, var(--el-violet-deep, #7534b3), var(--el-violet, #9147ff));
  color: #fff;
  box-shadow: 0 0 28px -6px rgba(145, 71, 255, 0.55);
}

body.cairn-site.cairn-home .final-cta-section .cta-button:not(.secondary) {
  background: linear-gradient(135deg, var(--el-violet-deep, #7534b3), var(--el-violet, #9147ff)) !important;
  color: #fff !important;
  box-shadow: 0 0 28px -6px rgba(145, 71, 255, 0.5) !important;
}

/* ---- Footer ---- */
body.cairn-site .footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #05050a;
  padding-top: 64px;
}

body.cairn-site .footer-container {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px 28px;
}

body.cairn-site .footer-column:first-child p {
  margin-top: 16px;
  max-width: 280px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(242, 238, 252, 0.48);
}

body.cairn-site .footer-column h4 {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242, 238, 252, 0.42);
  margin-bottom: 16px;
}

body.cairn-site .footer-meta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 32px;
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.82rem;
  color: rgba(242, 238, 252, 0.38);
}

body.cairn-site .footer-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.cairn-site .footer-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9147ff;
  box-shadow: 0 0 8px rgba(145, 71, 255, 0.6);
}

@media (max-width: 1100px) {
  body.cairn-site .navbar .nav-links li a {
    font-size: 0.76rem;
    padding: 6px 8px;
  }
}

body.cairn-site.inner-page .page-wrapper {
  padding-top: clamp(100px, 14vh, 140px);
}

body.cairn-site.inner-page .page-header {
  margin-bottom: 48px;
}

body.cairn-site .docs-sidebar,
body.cairn-site .docs-content {
  border-color: var(--cr-hairline);
}

body.cairn-site .docs-nav a.active {
  color: #fff;
  background: rgba(145, 71, 255, 0.14);
}

@media (max-width: 900px) {
  body.cairn-site header.main-hero .navbar ul.nav-links {
    flex: unset;
    overflow-x: visible;
  }

  body.cairn-site .footer-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  body.cairn-site .footer-container { grid-template-columns: 1fr; }
  body.cairn-site .footer-meta { flex-direction: column; align-items: flex-start; }
}

/* ===== inner-pages.css ===== */
/* ============================================================
   VITALITY — INNER PAGES UNIFIED SYSTEM
   One consistent layout for every inner page.
   Applied via body.inner-page.
   Loaded after elevated.css so it wins everywhere.
   ============================================================ */

/* ---- Universal page container ---- */
/* Every page wrapper gets identical layout */
.bios-wrapper,
.affiliate-container,
.faq-wrapper,
.tos-container,
.download-wrapper,
.download-header,
.documentation-wrapper,
.page-wrapper {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 96px 28px 80px;
}

/* Wider container for card grids */
.bios-wrapper,
.documentation-wrapper {
  max-width: 1100px;
}

/* Remove double-padding from nested elements */
.bios-wrapper .page-section,
.bios-wrapper .page-container,
.affiliate-container .affiliate-section,
.tos-container .tos-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---- Page header — consistent on all pages ---- */
.page-header,
.bios-header,
.affiliate-header,
.faq-header,
.tos-header,
.download-header {
  text-align: center;
  margin-bottom: 56px;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}

.page-header h1,
.bios-header h1,
.affiliate-header h1,
.faq-header h1,
.tos-header h1,
.download-header h1 {
  font-family: var(--font-heading) !important;
  font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.05 !important;
  background: linear-gradient(135deg, #7534b3 0%, #8b1cfb 25%, #9147ff 50%, #b57bff 75%, #7534b3 100%) !important;
  background-size: 200% 200% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: gradientShift 3s var(--ease-standard) infinite !important;
  margin-bottom: 12px !important;
}

.page-header p,
.bios-header p,
.affiliate-header p,
.faq-header p,
.tos-header p,
.download-header p {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: clamp(1rem, 1.5vw, 1.2rem) !important;
  max-width: 52ch;
  margin-inline: auto;
  line-height: 1.6;
  -webkit-text-fill-color: unset !important;
}

/* Separator under heading */
.page-header::after,
.bios-header::after,
.affiliate-header::after,
.faq-header::after,
.tos-header::after,
.download-header::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--el-violet), transparent);
  margin: 22px auto 0;
}

/* ---- Prose section layout — NO card boxes ---- */
.page-section,
.page-container,
.bios-section,
.tos-section,
.affiliate-section,
.content-block {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page-section,
.page-container {
  margin-bottom: 48px;
}

/* Section title for prose sections */
.page-section > h2,
.page-section > h3,
.page-container > h2,
.page-container > h3,
.affiliate-section > h2,
.tos-section > h2 {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem) !important;
  letter-spacing: -0.015em !important;
  color: rgba(255, 255, 255, 0.92) !important;
  -webkit-text-fill-color: unset !important;
  margin-bottom: 18px !important;
}

.page-section > p,
.page-container > p,
.affiliate-section > p,
.tos-section > p {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.95rem !important;
  line-height: 1.75 !important;
  max-width: 72ch;
  -webkit-text-fill-color: unset !important;
}

/* ---- Two-column content (bios intro) ---- */
.two-column-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  padding: 0;
  margin-bottom: 48px;
}

.two-column-content .content-block h2,
.two-column-content .content-block h3 {
  font-family: var(--font-heading) !important;
  font-size: 1.35rem !important;
  letter-spacing: -0.01em !important;
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: unset !important;
  margin-bottom: 14px !important;
}

.two-column-content .content-block p,
.two-column-content .content-block li {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.9rem !important;
  line-height: 1.75 !important;
  -webkit-text-fill-color: unset !important;
}

.two-column-content .content-block ul {
  padding-left: 16px;
}

@media (max-width: 700px) { .two-column-content { grid-template-columns: 1fr; gap: 28px; } }

/* ---- Separator between sections ---- */
.page-section + .page-section,
.affiliate-section + .affiliate-section,
.tos-section + .tos-section {
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  padding-top: 40px;
  margin-top: 8px;
}

/* ---- BIOS Step cards (numbered steps) ---- */
.bios-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.bios-step-card {
  background: var(--el-card-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 24px 22px !important;
  box-shadow: none !important;
  transition: border-color 0.3s var(--ease-standard), transform 0.3s var(--ease-standard) !important;
}

.bios-step-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(145, 71, 255, 0.3) !important;
}

.bios-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--el-violet-deep), var(--el-violet));
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.bios-step-card h3 {
  font-family: var(--font-heading) !important;
  font-size: 1rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: unset !important;
  margin-bottom: 8px !important;
}

.bios-step-card p {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 0.85rem !important;
  line-height: 1.65 !important;
  -webkit-text-fill-color: unset !important;
  margin: 0 !important;
}

/* ---- BIOS Capability cards (feature grid) ---- */
.bios-capabilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 8px;
}

.bios-cap-card {
  background: var(--el-card-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 20px 20px !important;
  box-shadow: none !important;
  transition: border-color 0.3s var(--ease-standard), transform 0.3s var(--ease-standard) !important;
}

.bios-cap-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(145, 71, 255, 0.3) !important;
}

.bios-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(145, 71, 255, 0.12);
  border: 1px solid rgba(145, 71, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--el-violet-bright);
  margin-bottom: 12px;
}
.bios-card-icon svg { width: 19px; height: 19px; }

.bios-cap-card h3 {
  font-family: var(--font-heading) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--el-violet-bright) !important;
  -webkit-text-fill-color: unset !important;
  margin-bottom: 10px !important;
}

.bios-cap-card p {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 0.83rem !important;
  line-height: 1.65 !important;
  -webkit-text-fill-color: unset !important;
  margin: 0 !important;
}

@media (max-width: 820px) { .bios-capabilities-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bios-capabilities-grid { grid-template-columns: 1fr; } }

/* ---- BIOS Stat cards ---- */
.bios-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 8px;
}

.bios-stat-card {
  background: var(--el-card-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 24px 20px !important;
  text-align: center;
  box-shadow: none !important;
}

.bios-stat-value {
  font-family: var(--font-heading) !important;
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  background: linear-gradient(120deg, #fff, var(--el-violet-bright));
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  line-height: 1.1 !important;
  margin-bottom: 8px !important;
}

.bios-stat-card h3 {
  font-family: var(--font-heading) !important;
  font-size: 0.85rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
  -webkit-text-fill-color: unset !important;
  margin: 0 !important;
}

@media (max-width: 700px) { .bios-stat-grid { grid-template-columns: 1fr; } }

/* ---- BIOS Spec / Audience cards ---- */
.bios-specs-grid,
.bios-audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 8px;
}

.bios-spec-card,
.bios-audience-card {
  background: var(--el-card-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: none !important;
  transition: border-color 0.3s var(--ease-standard), transform 0.3s var(--ease-standard) !important;
}

.bios-spec-card:hover,
.bios-audience-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(145, 71, 255, 0.3) !important;
}

.bios-spec-card h3,
.bios-audience-card h3 {
  font-family: var(--font-heading) !important;
  font-size: 0.95rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: unset !important;
  margin-bottom: 8px !important;
}

.bios-spec-card p,
.bios-audience-card p,
.bios-spec-card li,
.bios-audience-card li {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 0.84rem !important;
  line-height: 1.6 !important;
  -webkit-text-fill-color: unset !important;
}

/* ---- CTA section (bios) ---- */
.bios-cta-section,
.page-section.cta,
.bios-cta {
  text-align: center;
  padding: 52px 0 !important;
  background: none !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.bios-cta-section h2,
.bios-cta h2 {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important;
  letter-spacing: -0.02em !important;
  background: linear-gradient(120deg, #fff 40%, var(--el-violet-bright));
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin-bottom: 14px !important;
}

.bios-cta-section p,
.bios-cta p {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 1rem !important;
  margin-bottom: 28px !important;
  -webkit-text-fill-color: unset !important;
}

.cta-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- FAQ accordion ---- */
.faq-content { max-width: 760px; margin: 0 auto; }

.faq-item {
  background: none !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  cursor: pointer;
}

.faq-item:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 4px;
  gap: 16px;
}

.faq-question h3 {
  font-family: var(--font-heading) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  -webkit-text-fill-color: unset !important;
  margin: 0 !important;
  line-height: 1.4;
}

.faq-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(145, 71, 255, 0.4);
  background: rgba(145, 71, 255, 0.1);
  color: var(--el-violet-bright) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  transition: background 0.25s, transform 0.25s;
}

.faq-item.active .faq-icon {
  background: linear-gradient(135deg, var(--el-violet-deep), var(--el-violet));
  color: #fff !important;
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 4px 22px;
  display: none;
}

.faq-item.active .faq-answer {
  display: block;
}

.faq-answer p {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.9rem !important;
  line-height: 1.75 !important;
  -webkit-text-fill-color: unset !important;
  margin: 0 !important;
}

/* ---- TOS clean layout ---- */
.tos-container { max-width: 800px !important; }

.tos-section {
  background: none !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 0 !important;
  padding: 32px 0 !important;
  box-shadow: none !important;
}

.tos-section:last-of-type { border-bottom: none !important; }

.tos-section h2 {
  font-family: var(--font-heading) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: unset !important;
  margin-bottom: 12px !important;
}

.tos-section p,
.tos-section li {
  color: rgba(255, 255, 255, 0.58) !important;
  font-size: 0.9rem !important;
  line-height: 1.75 !important;
  -webkit-text-fill-color: unset !important;
}

.tos-section ul {
  padding-left: 18px;
  margin-top: 10px;
}

/* ---- Affiliate clean layout ---- */
.affiliate-container { max-width: 860px !important; }

.affiliate-section {
  background: none !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 0 !important;
  padding: 36px 0 !important;
  box-shadow: none !important;
}

.affiliate-section:first-of-type { padding-top: 0 !important; }
.affiliate-section:last-of-type { border-bottom: none !important; }

.affiliate-section h2 {
  font-family: var(--font-heading) !important;
  font-size: 1.3rem !important;
  letter-spacing: -0.01em !important;
  color: rgba(255, 255, 255, 0.92) !important;
  -webkit-text-fill-color: unset !important;
  margin-bottom: 14px !important;
}

.affiliate-section p,
.affiliate-section li {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.92rem !important;
  line-height: 1.72 !important;
  -webkit-text-fill-color: unset !important;
}

.benefits-list {
  list-style: none !important;
  padding: 0 !important;
  margin-top: 10px;
}

.benefits-list li {
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.9rem !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

.benefits-list li::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: var(--el-violet-bright);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Download cards ---- */
.download-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 8px;
}

.download-card {
  background: var(--el-card-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 28px !important;
  box-shadow: none !important;
  transition: border-color 0.3s var(--ease-standard), transform 0.3s var(--ease-standard) !important;
}

.download-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(145, 71, 255, 0.3) !important;
}

.download-card.featured {
  border-color: rgba(145, 71, 255, 0.35) !important;
  background: linear-gradient(160deg, rgba(109,40,217,0.18), rgba(14,11,26,0.7)) !important;
}

.card-header {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 16px;
}

.card-header h3 {
  font-family: var(--font-heading) !important;
  font-size: 1.25rem !important;
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: unset !important;
  margin-bottom: 4px !important;
}

.version-tag {
  display: inline-block;
  background: rgba(145, 71, 255, 0.15);
  border: 1px solid rgba(145, 71, 255, 0.3);
  color: var(--el-violet-bright) !important;
  -webkit-text-fill-color: unset !important;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  margin-top: 4px;
}

.featured-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--el-violet-deep), var(--el-violet));
  color: #fff !important;
  -webkit-text-fill-color: unset !important;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 12px;
  margin-bottom: 14px;
  display: block;
  width: fit-content;
}

.card-body { padding: 0 !important; background: none !important; border: none !important; }

.features-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 !important;
}

.features-list li {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 0.875rem !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  gap: 8px;
  -webkit-text-fill-color: unset !important;
}

.features-list li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--el-violet);
  flex-shrink: 0;
}

.system-requirements {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important;
  padding: 14px !important;
  margin-top: 16px;
  box-shadow: none !important;
}

.system-requirements h4 {
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--el-violet-bright) !important;
  -webkit-text-fill-color: unset !important;
  margin-bottom: 10px !important;
}

.system-requirements p,
.system-requirements li {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 0.8rem !important;
  line-height: 1.6 !important;
  -webkit-text-fill-color: unset !important;
}

/* ---- Download CTA at bottom ---- */
.download-card .cta-button {
  margin-top: 20px;
  width: 100%;
  justify-content: center;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .bios-wrapper,
  .affiliate-container,
  .faq-wrapper,
  .tos-container,
  .download-wrapper,
  .documentation-wrapper,
  .page-wrapper {
    padding: 84px 18px 60px;
  }
  .download-options { grid-template-columns: 1fr; }
  .bios-capabilities-grid { grid-template-columns: 1fr; }
  .bios-stat-grid { grid-template-columns: 1fr; }
}

/* ---- BIOS CTA panel ---- */
.bios-cta-wrapper,
.bios-cta-card {
  text-align: center !important;
  padding: 52px 32px !important;
  background: linear-gradient(135deg, rgba(109,40,217,0.15), rgba(14,11,26,0.6)) !important;
  border: 1px solid rgba(145,71,255,0.25) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  margin-top: 48px;
}

.bios-cta-card h2 {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem) !important;
  letter-spacing: -0.02em !important;
  background: linear-gradient(120deg, #fff 40%, var(--el-violet-bright));
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin-bottom: 12px !important;
}

.bios-cta-card p {
  color: rgba(255,255,255,0.58) !important;
  font-size: 1rem !important;
  margin-bottom: 28px !important;
  max-width: 52ch;
  margin-inline: auto !important;
  -webkit-text-fill-color: unset !important;
}

/* ===== docs.css ===== */
/* ============================================================
   DOCUMENTATION PAGE — clean, Stripe/Linear style
   ============================================================ */

.documentation-wrapper { max-width: 1320px; margin: 0 auto; padding: 100px 24px 100px; }
.documentation-header { text-align: left !important; max-width: 680px; margin-bottom: 48px; }
.documentation-header h1 { font-family: var(--font-heading); font-size: clamp(2rem,4vw,3rem) !important; letter-spacing: -0.02em; color: #fff !important; -webkit-text-fill-color: unset !important; }
.documentation-header p { color: var(--text-dim); font-size: 1.1rem; margin-top: 10px; }

.documentation-container { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; max-width: 1320px; margin: 0; padding: 0; }
.documentation-container .documentation-content.full-width { grid-column: 1 / -1; }

/* ============================================================
   SIDEBAR — timeline dot navigation (no AI-slop box/border combo)
   ============================================================ */
.documentation-sidebar {
  position: sticky;
  top: 100px;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  scrollbar-width: none;
}
.documentation-sidebar::-webkit-scrollbar { display: none; }

/* Search */
.documentation-sidebar .search-container {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 28px;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  padding: 8px 14px;
  box-shadow: none !important;
  transition: border-color 0.2s var(--ease-standard);
}
.documentation-sidebar .search-container:focus-within {
  border-color: rgba(145,71,255,0.4) !important;
}
.documentation-sidebar .search-container input {
  flex: 1; background: transparent; border: none; outline: none;
  color: rgba(255,255,255,0.8); font-size: 0.875rem;
  font-family: var(--font-body);
}
.documentation-sidebar .search-container input::placeholder { color: rgba(255,255,255,0.3); }
.documentation-sidebar .search-container button {
  background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0;
}

/* Section group labels */
.documentation-sidebar .sidebar-nav h3 {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  margin: 28px 0 10px 24px;
}

/* ---- Timeline nav list ---- */
.documentation-sidebar .sidebar-nav ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 24px;
  position: relative;
  /* Continuous vertical track */
  border-left: 1px solid rgba(255,255,255,0.07);
}

.documentation-sidebar .sidebar-nav ul li {
  position: relative;
  margin: 0;
}

/* The link itself — no box, no border */
.documentation-sidebar .sidebar-nav ul li a {
  display: block !important;
  padding: 5px 10px !important;
  font-size: 0.82rem !important;
  font-weight: 400;
  color: rgba(255,255,255,0.38) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.38) !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  transform: none !important;
  transition: color 0.18s var(--ease-standard) !important;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Timeline dot — small circle sitting on the track line */
.documentation-sidebar .sidebar-nav ul li a::before {
  content: '';
  position: absolute;
  left: -27px; /* sits on the border-left track */
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  transition: background 0.2s var(--ease-standard), transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s var(--ease-standard);
}

/* Hover state */
.documentation-sidebar .sidebar-nav ul li a:hover {
  color: rgba(255,255,255,0.75) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.75) !important;
}
.documentation-sidebar .sidebar-nav ul li a:hover::before {
  background: rgba(145,71,255,0.5);
}

/* Active state — bright text + glowing dot, NO box */
.documentation-sidebar .sidebar-nav ul li a.active,
.documentation-sidebar .sidebar-nav ul li a.doc-active {
  color: var(--el-violet-bright) !important;
  -webkit-text-fill-color: var(--el-violet-bright) !important;
  font-weight: 500;
}
.documentation-sidebar .sidebar-nav ul li a.active::before,
.documentation-sidebar .sidebar-nav ul li a.doc-active::before {
  background: var(--el-violet-bright);
  transform: translateY(-50%) scale(1.6);
  box-shadow: 0 0 8px rgba(181,123,255,0.7), 0 0 3px rgba(181,123,255,0.5);
}

/* Content */
.documentation-content { min-width: 0; background: transparent; border: none; padding: 0; }
.doc-section { padding-bottom: 64px; margin-bottom: 64px; border-bottom: 1px solid var(--el-hairline); }
.doc-section:last-child { border-bottom: none; margin-bottom: 0; }
.doc-section h2 { font-family: var(--font-heading) !important; font-size: clamp(1.5rem,2.5vw,2rem) !important; letter-spacing: -0.015em !important; margin-bottom: 14px; color: #fff !important; -webkit-text-fill-color: unset !important; }
.doc-section > p { font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,0.65); margin-bottom: 28px; max-width: 72ch; }
.doc-section h3 { font-family: var(--font-heading) !important; font-size: 1.15rem !important; margin: 28px 0 10px; color: rgba(255,255,255,0.88) !important; -webkit-text-fill-color: unset !important; }
.doc-section ul { padding-left: 18px; }
.doc-section ul li { font-size: 0.9rem; color: rgba(255,255,255,0.6); padding: 4px 0; }

/* Steps */
.steps-container { display: flex; flex-direction: column; }
.step { display: flex; gap: 18px; padding: 22px 0 22px 24px !important; border-left: 2px solid var(--el-hairline) !important; border-bottom: none !important; position: relative; margin-left: 14px; }
.step-number { position: absolute; left: -16px; width: 30px; height: 30px; border-radius: 50%; background: var(--el-violet-deep); color: #fff; font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 0 3px var(--el-bg), 0 0 0 4px var(--el-violet-deep); }
.step-content { flex: 1; }
.step-content h3 { font-family: var(--font-heading) !important; font-size: 1rem !important; font-weight: 600; margin: 0 0 6px !important; color: rgba(255,255,255,0.9) !important; -webkit-text-fill-color: unset !important; }
.step-content p { font-size: 0.9rem; color: rgba(255,255,255,0.6); margin: 0 0 12px; }
.step-image { margin-top: 16px; border-radius: var(--el-card-radius); overflow: hidden; }
.step-image img { width: 100%; height: auto; border-radius: var(--el-card-radius); border: 1px solid var(--el-hairline); }

/* Notes */
.note-container { margin-top: 24px; }
.note, .warning { padding: 14px 18px; border-radius: 10px; font-size: 0.875rem; line-height: 1.6; border: 1px solid; box-shadow: none; }
.note { border-color: rgba(145,71,255,0.35); background: rgba(145,71,255,0.08); color: rgba(255,255,255,0.75); }
.warning { border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.07); color: rgba(255,255,255,0.75); }
.note strong, .warning strong { color: #fff; }

/* Feature rows */
.feature-list { display: flex; flex-direction: column; }
.feature { padding: 24px 0; border-bottom: 1px solid var(--el-hairline); background: none !important; border-radius: 0 !important; box-shadow: none !important; }
.feature:first-child { border-top: 1px solid var(--el-hairline); }
.feature:hover { transform: none !important; border-color: var(--el-hairline) !important; box-shadow: none !important; }
.feature h3 { font-family: var(--font-heading) !important; font-size: 1.05rem !important; font-weight: 600; margin-bottom: 8px; color: rgba(255,255,255,0.9) !important; -webkit-text-fill-color: unset !important; }
.feature p { font-size: 0.9rem; color: rgba(255,255,255,0.6); margin: 0 0 10px; max-width: 80ch; }
.feature-icon-row { display: flex; align-items: flex-start; gap: 16px; }
.feature-icon-row .feature-icon-badge {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(145, 71, 255, 0.12);
  border: 1px solid rgba(145, 71, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--el-violet-bright);
}
.feature-icon-row .feature-icon-badge svg { width: 20px; height: 20px; }
.feature-icon-row .feature-body { flex: 1; min-width: 0; }
.toggle-info { font-size: 0.8rem; color: rgba(255,255,255,0.45); margin-top: 8px; }
.toggle-on { display: inline-block; background: rgba(16,185,129,0.15); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.3); border-radius: 4px; padding: 1px 7px; font-family: var(--font-mono); font-size: 0.72rem; }
.toggle-off { display: inline-block; background: rgba(239,68,68,0.12); color: #fca5a5; border: 1px solid rgba(239,68,68,0.25); border-radius: 4px; padding: 1px 7px; font-family: var(--font-mono); font-size: 0.72rem; }

/* Requirements */
.requirements-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 14px; margin-top: 4px; }
.requirement { background: var(--el-card-bg) !important; border: 1px solid var(--el-card-border) !important; border-radius: var(--el-card-radius) !important; padding: 16px 18px; box-shadow: none !important; }
.requirement:hover { transform: none !important; box-shadow: none !important; }
.requirement h3 { font-family: var(--font-mono) !important; font-size: 0.72rem !important; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--el-violet-bright) !important; -webkit-text-fill-color: unset !important; margin-bottom: 6px; display: flex; align-items: center; gap: 7px; }
.requirement h3 svg { width: 15px; height: 15px; flex-shrink: 0; }
.requirement p { font-size: 0.875rem; color: rgba(255,255,255,0.75) !important; margin: 0; }

/* Tools grid */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 14px; }
.tool-card { background: var(--el-card-bg) !important; border: 1px solid var(--el-card-border) !important; border-radius: var(--el-card-radius) !important; padding: 16px 18px !important; box-shadow: none !important; transition: border-color 0.25s var(--ease-standard), transform 0.25s var(--ease-standard) !important; }
.tool-card:hover { border-color: rgba(145,71,255,0.4) !important; transform: translateY(-2px) !important; box-shadow: none !important; }
.tool-card h3 { font-family: var(--font-heading) !important; font-size: 0.9rem !important; font-weight: 600; margin-bottom: 6px; color: rgba(255,255,255,0.9) !important; -webkit-text-fill-color: unset !important; }
.tool-card p { font-size: 0.8rem; color: rgba(255,255,255,0.5) !important; margin: 0; }

/* Utilities */
.utilities-list { display: flex; flex-direction: column; }
.utility { padding: 20px 0; border-bottom: 1px solid var(--el-hairline); background: none !important; border-radius: 0 !important; box-shadow: none !important; }
.utility:first-child { border-top: 1px solid var(--el-hairline); }
.utility:hover { transform: none !important; }
.utility h3 { font-family: var(--font-heading) !important; font-size: 1rem !important; color: rgba(255,255,255,0.9) !important; -webkit-text-fill-color: unset !important; margin-bottom: 6px; }
.utility-note { font-size: 0.8rem; color: rgba(255,255,255,0.4); margin-top: 8px; }

/* License cards */
.cards-container { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 24px; }
.doc-section .card { background: var(--el-card-bg) !important; border: 1px solid var(--el-card-border) !important; border-radius: var(--el-card-radius) !important; padding: 20px !important; box-shadow: none !important; }
.doc-section .card:hover { transform: none !important; box-shadow: none !important; }
.doc-section .card h4 { font-family: var(--font-heading); font-size: 1.05rem; margin-bottom: 8px; color: #fff; }
.doc-section .card p { font-size: 0.875rem; color: rgba(255,255,255,0.55); margin-bottom: 10px; }
.doc-section .card .price { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--el-violet-bright) !important; -webkit-text-fill-color: unset !important; margin: 0; }

/* Lists */
.numbered-list { padding-left: 20px; }
.numbered-list li { padding: 6px 0; font-size: 0.9rem; color: rgba(255,255,255,0.65); }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin-top: 12px; }
.tag-list li { background: var(--el-surface); border: 1px solid var(--el-hairline); border-radius: 6px; padding: 4px 12px; font-size: 0.8rem; color: rgba(255,255,255,0.7); }

/* Issues */
.issues-list { display: flex; flex-direction: column; }
.issue { padding: 22px 0; border-bottom: 1px solid var(--el-hairline); background: none !important; border-radius: 0 !important; box-shadow: none !important; }
.issue:first-child { border-top: 1px solid var(--el-hairline); }
.issue h3 { font-family: var(--font-heading) !important; font-size: 1.05rem !important; color: rgba(255,255,255,0.9) !important; -webkit-text-fill-color: unset !important; margin-bottom: 8px; }
.issue p { font-size: 0.9rem; color: rgba(255,255,255,0.6); margin: 0; }

/* Interface overview */
.interface-overview { display: flex; flex-direction: column; }
.interface-section { padding: 22px 0; border-bottom: 1px solid var(--el-hairline); }
.interface-section:first-child { border-top: 1px solid var(--el-hairline); }
.interface-section h3 { font-family: var(--font-heading) !important; font-size: 1.05rem !important; margin-bottom: 10px; color: rgba(255,255,255,0.9) !important; -webkit-text-fill-color: unset !important; }
.interface-section ul { padding-left: 18px; }
.interface-section li { font-size: 0.875rem; color: rgba(255,255,255,0.6); padding: 4px 0; }

/* Support CTA */
.support-cta { margin-top: 32px; padding: 28px !important; background: linear-gradient(135deg,rgba(145,71,255,0.14),rgba(145,71,255,0.06)) !important; border: 1px solid rgba(145,71,255,0.28) !important; border-radius: var(--el-card-radius) !important; box-shadow: none !important; }
.support-cta:hover { transform: none !important; }
.support-cta h3 { font-family: var(--font-heading); font-size: 1.2rem; margin-bottom: 8px; color: #fff; }
.support-cta p { color: rgba(255,255,255,0.6); margin-bottom: 18px; }

code { background: rgba(145,71,255,0.12); border: 1px solid rgba(145,71,255,0.2); border-radius: 5px; padding: 2px 7px; font-family: var(--font-mono); font-size: 0.82em; color: var(--el-violet-bright); }

@media (max-width: 900px) {
  .documentation-container { grid-template-columns: 1fr; }
  .documentation-sidebar { position: static; }
  .cards-container { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .requirements-table { grid-template-columns: 1fr; }
  .tools-grid { grid-template-columns: 1fr; }
}

/* ===== vitality-ui.css ===== */
/* ============================================================
   VITALITY — SHARED UI LAYER (glass + bento hybrid)
   Component classes used across all pages. Builds on
   design-tokens.css variables; loaded after page CSS so it
   wins on equal specificity.

   Components:
     .v-card            glass surface w/ hover lift + glow
     .v-card--gradient  1px gradient border variant
     .v-bento           responsive mini-tile grid
     .v-pill            badge (accent) / .v-pill--success
     .v-cta             glowing gradient button / --ghost
     .v-section-head    label + heading block
     .v-reveal          scroll reveal (JS adds html.v-anim + .is-in)
   ============================================================ */

:root {
  --v-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Violet-only ramp — no off-palette hues; the site is monochrome purple */
  --v-border-grad: linear-gradient(135deg,
      rgba(181, 123, 255, 0.9),
      rgba(145, 71, 255, 0.18) 45%,
      rgba(109, 40, 217, 0.75));
}

/* ---- Glass card ---- */
.v-card {
  position: relative;
  background: var(--el-card-bg);
  border: 1px solid var(--el-card-border);
  border-radius: var(--el-card-radius);
  box-shadow: var(--el-shadow-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.35s var(--v-ease),
              border-color 0.35s var(--v-ease),
              box-shadow 0.35s var(--v-ease);
}
.v-card:hover {
  transform: translateY(-4px);
  border-color: var(--el-hairline-strong);
  box-shadow: var(--el-shadow-card), var(--el-glow-violet);
}

/* ---- Gradient-border card ---- */
.v-card--gradient {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--el-bg-2), var(--el-bg-2)) padding-box,
    var(--v-border-grad) border-box;
}
.v-card--gradient:hover {
  border-color: transparent;
  background:
    linear-gradient(#100c1c, #100c1c) padding-box,
    var(--v-border-grad) border-box;
}

/* ---- Bento grid of mini stat tiles ---- */
.v-bento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}
.v-bento-item {
  background: rgba(145, 71, 255, 0.07);
  border: 1px solid rgba(145, 71, 255, 0.14);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 0.8rem;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.4;
  transition: background 0.25s var(--v-ease), border-color 0.25s var(--v-ease);
}
.v-bento-item:hover {
  background: rgba(145, 71, 255, 0.13);
  border-color: rgba(145, 71, 255, 0.3);
}
.v-bento-item strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--text-light);
}

/* ---- Pills ---- */
.v-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--el-violet-bright);
  background: rgba(145, 71, 255, 0.12);
  border: 1px solid rgba(145, 71, 255, 0.28);
}
.v-pill--success {
  color: #d9c2ff;
  background: rgba(145, 71, 255, 0.2);
  border-color: rgba(181, 123, 255, 0.45);
}

/* ---- CTA buttons ---- */
.v-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, var(--el-violet-deep), var(--el-violet) 55%, var(--el-violet-bright));
  background-size: 160% 160%;
  background-position: 0% 50%;
  box-shadow: 0 4px 24px -4px rgba(var(--el-accent-rgb), 0.45);
  transition: background-position 0.45s var(--v-ease),
              box-shadow 0.35s var(--v-ease),
              transform 0.35s var(--v-ease);
}
.v-cta:hover {
  background-position: 100% 50%;
  box-shadow: 0 6px 32px -4px rgba(var(--el-accent-rgb), 0.65);
  transform: translateY(-2px);
  color: #fff;
}
.v-cta--ghost {
  background: transparent;
  border: 1px solid rgba(var(--el-accent-rgb), 0.45);
  color: var(--el-violet-bright);
  box-shadow: none;
}
.v-cta--ghost:hover {
  background: rgba(var(--el-accent-rgb), 0.1);
  border-color: var(--el-violet);
  color: var(--el-violet-bright);
  box-shadow: 0 4px 24px -8px rgba(var(--el-accent-rgb), 0.4);
}

/* ---- Section head ---- */
.v-section-head { margin-bottom: var(--space-2xl); }
.v-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--el-violet-bright);
  margin-bottom: var(--space-sm);
}
.v-section-head h1,
.v-section-head h2 {
  font-family: var(--font-heading);
  color: var(--text-light);
  letter-spacing: -0.02em;
}
.v-section-head .v-sub {
  color: var(--text-dim);
  max-width: 60ch;
  margin-top: var(--space-sm);
}

/* ---- Scroll reveal ----
   Visible by default (no-JS safe). scripts/vitality-ui.js adds
   html.v-anim only when motion is allowed, then .is-in per element. */
html.v-anim .v-reveal {
  opacity: 0;
  transform: translateY(18px);
}
html.v-anim .v-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--v-ease) var(--v-delay, 0ms),
              transform 0.6s var(--v-ease) var(--v-delay, 0ms);
}

/* ---- Accordion (FAQ) ---- */
.v-acc-item {
  overflow: hidden;
  margin-bottom: 12px;
}
.v-acc-item summary,
.v-acc-item .v-acc-q {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-family: var(--font-heading);
  font-size: 1.02rem;
  color: var(--text-light);
}
.v-acc-item summary::-webkit-details-marker { display: none; }
.v-acc-item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--el-violet-bright);
  border-bottom: 2px solid var(--el-violet-bright);
  transform: rotate(45deg);
  transition: transform 0.3s var(--v-ease);
}
.v-acc-item[open] summary::after { transform: rotate(225deg); }
.v-acc-item .v-acc-a {
  padding: 0 22px 20px;
  color: var(--text-dim);
  line-height: 1.7;
}

/* ---- Step timeline (how-it-works) ---- */
.v-steps { counter-reset: vstep; }
.v-step {
  position: relative;
  padding-left: 64px;
  margin-bottom: var(--space-xl);
  counter-increment: vstep;
}
.v-step::before {
  content: counter(vstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--el-violet-bright);
  background: rgba(145, 71, 255, 0.1);
  border: 1px solid rgba(145, 71, 255, 0.3);
  border-radius: var(--radius-md);
  padding: 8px 10px;
}
.v-step::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 46px;
  bottom: -26px;
  width: 1px;
  background: linear-gradient(180deg, rgba(145, 71, 255, 0.35), transparent);
}
.v-step:last-child::after { display: none; }

/* ============================================================
   PAGE UPGRADES — restyle existing page classes to the new
   direction. !important needed to beat inner-pages.css.
   ============================================================ */

/* Download page: featured card gets the gradient border */
body.cairn-site .download-card.featured {
  border: 1px solid transparent !important;
  border-color: transparent !important;
  background:
    linear-gradient(#100c1c, #100c1c) padding-box,
    var(--v-border-grad) border-box !important;
}
body.cairn-site .download-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--el-glow-violet) !important;
}
body.cairn-site .download-card .featured-badge {
  background: rgba(145, 71, 255, 0.2);
  border: 1px solid rgba(181, 123, 255, 0.45);
  color: #d9c2ff !important;
}

/* FAQ page: flat list -> glass accordion cards w/ animated open */
body.cairn-site .faq-item {
  background: var(--el-card-bg) !important;
  border: 1px solid var(--el-card-border) !important;
  border-radius: 14px !important;
  margin-bottom: 12px;
  transition: border-color 0.3s var(--v-ease), background 0.3s var(--v-ease);
  interpolate-size: allow-keywords;
}
body.cairn-site .faq-item:hover,
body.cairn-site .faq-item.active {
  border-color: rgba(145, 71, 255, 0.35) !important;
}
body.cairn-site .faq-item.active {
  background: rgba(145, 71, 255, 0.05) !important;
}
body.cairn-site .faq-question { padding: 20px 22px; }
body.cairn-site .faq-answer {
  display: block !important;
  height: 0;
  overflow: hidden;
  padding: 0 22px !important;
  transition: height 0.4s var(--v-ease);
}
body.cairn-site .faq-item.active .faq-answer {
  height: auto;
  padding-bottom: 22px !important;
}

/* Docs / how-it-works: flat feature & utility lists -> glass cards */
body.cairn-site .feature,
body.cairn-site .utility {
  background: var(--el-card-bg) !important;
  border: 1px solid var(--el-card-border) !important;
  border-radius: 14px !important;
  padding: 22px 24px !important;
  margin-bottom: 14px;
  transition: border-color 0.3s var(--v-ease);
}
body.cairn-site .feature:hover,
body.cairn-site .utility:hover {
  border-color: rgba(145, 71, 255, 0.35) !important;
}
body.cairn-site .requirement {
  transition: border-color 0.3s var(--v-ease);
}
body.cairn-site .requirement:hover {
  border-color: rgba(145, 71, 255, 0.35) !important;
}

/* FAQ icon: components.css draws a CSS-bar plus via ::before/::after
   while the markup also contains a literal "+" — both rendered, giving a
   doubled icon. Keep the text glyph, kill the bars. */
.faq-icon::before,
.faq-icon::after {
  display: none !important;
  content: none !important;
}

/* ToS / affiliate / docs steps: cairn-site.css turns these into cards
   (border + surface) but inner-pages.css still zeroes their horizontal
   padding as if they were prose — text ends up jammed against the card
   edge. Cards get card padding. */
body.cairn-site .tos-section {
  padding: 28px 30px !important;
  margin-bottom: 18px;
}
body.cairn-site .tos-section:last-of-type { border-bottom: 1px solid var(--cr-hairline) !important; }
body.cairn-site .affiliate-step,
body.cairn-site .step {
  padding: 22px 26px !important;
}
body.cairn-site .tos-section h2 { margin-top: 0 !important; }

/* Shader plasma canvas: full brightness fights body text on inner pages
   and pops in abruptly after JS load. Dim it on inner pages and ease it
   in everywhere for a consistent tone. */
/* Single source of truth for plasma brightness — the scattered
   `opacity: 0.5 !important` rules in components/elevated/cairn-* were
   removed; tune per-page with --v-shader-max only. */
#vitality-shader-bg {
  opacity: 0;
  animation: v-shader-in 1.6s ease-out 0.15s forwards;
  /* lvh = large viewport: keep the canvas covering the extra strip Android
     reveals when the URL bar hides, instead of showing background there */
  height: 100lvh !important;
}
@keyframes v-shader-in {
  to { opacity: var(--v-shader-max, 0.5); }
}
/* Inner pages: keep the plasma as quiet atmosphere, not a light show */
body.inner-page { --v-shader-max: 0.25; }
/* Homepage: one even glow level for the whole page — per-section scrims
   (hero radials, cinematic vignette) were removed so this is the only
   thing controlling brightness */
body.cairn-home { --v-shader-max: 0.35; }

/* Affiliate steps have no .step-content wrapper — h3 and p are direct
   flex children of .step, putting a huge heading inline with its text.
   Grid: number in col 1, heading + copy stacked in col 2. */
body.cairn-site .affiliate-steps .step {
  display: grid !important;
  grid-template-columns: auto 1fr;
  column-gap: 18px;
  align-items: start;
}
body.cairn-site .affiliate-steps .step .step-number { grid-row: 1 / span 2; }
body.cairn-site .affiliate-steps .step h3 {
  margin: 0 0 6px !important;
  font-size: 1.05rem !important;
  font-family: var(--font-heading) !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
}
body.cairn-site .affiliate-steps .step h3 svg {
  width: 18px;
  height: 18px;
  color: var(--el-violet-bright);
  flex-shrink: 0;
}
body.cairn-site .affiliate-steps .step p { margin: 0 !important; }

/* ---- Fallbacks ---- */
@media (prefers-reduced-motion: reduce) {
  .v-card, .v-card:hover, .v-cta, .v-cta:hover, .v-bento-item {
    transition: none;
    transform: none;
  }
  html.v-anim .v-reveal { opacity: 1; transform: none; }
}
html.no-gpu .v-card,
html.no-gpu .v-card:hover {
  transform: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.no-gpu .v-cta,
html.no-gpu .v-cta:hover {
  box-shadow: none;
  transform: none;
}

/* Touch devices: backdrop-filter blur is a major scroll-jank source on
   Android GPUs (30+ blurred surfaces compositing every frame). The card
   backgrounds are near-opaque anyway — drop the blur, keep the look. */
@media (pointer: coarse) {
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .v-bento { grid-template-columns: repeat(2, 1fr); }
  .v-step { padding-left: 52px; }
  .v-cta { width: 100%; }
}

/* Docs on phones: sidebar (search + full nav) stacked before the content,
   forcing a screen of scrolling before anything readable. Content first,
   sidebar becomes an index below it. */
@media (max-width: 900px) {
  .documentation-container { display: flex !important; flex-direction: column; }
  .documentation-container .documentation-content { order: 1; }
  .documentation-container .documentation-sidebar { order: 2; }
}

/* ===== perf-fallback.css ===== */
/* ============================================================
   VITALITY — no-hardware-acceleration fallback
   Applied when scripts/perf-detect.js detects a software WebGL
   renderer (or no WebGL at all) and adds .no-gpu to <html>.
   Strips paint-heavy effects that tank frame rate on a CPU
   compositor. Load this stylesheet LAST so it can win on
   equal specificity without excessive !important.
   ============================================================ */

/* Backdrop blur is one of the most expensive paint ops on a
   software compositor — drop it everywhere and let the
   underlying near-opaque backgrounds carry the UI. */
html.no-gpu * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* The scrolled navbar pill relies on blur(24px) to read against
   the background; bump it to near-opaque so text stays legible. */
html.no-gpu .main-hero > .navbar.is-scrolled,
html.no-gpu header.main-hero .navbar.is-scrolled {
  background: rgba(10, 9, 14, 0.94) !important;
}

/* Custom cursor — a perpetual rAF-driven follower, disabled in JS
   (scripts/cursor.js) but also hidden here in case of a flash. */
html.no-gpu .vit-cursor-dot,
html.no-gpu .vit-cursor-ring {
  display: none !important;
}

/* Per-card pointer-tracked glow (scripts/glowing-effect.js,
   scripts/elevated.js SpotlightCard) — pointermove rect math on
   every card, every move. Disabled in JS too; hidden as backstop. */
html.no-gpu .glowing-effect,
html.no-gpu [data-glow-inner] {
  display: none !important;
}

/* Animated gradient-text (background-position keyframes) forces a
   repaint of the text every frame, indefinitely. Freeze on a
   single frame of the gradient instead. */
html.no-gpu .hero-word,
html.no-gpu .page-header h1,
html.no-gpu .download-header h1,
html.no-gpu .pricing-header h1,
html.no-gpu .bios-header h1,
html.no-gpu .affiliate-header h1,
html.no-gpu .faq-header h1,
html.no-gpu .tos-header h1,
html.no-gpu .documentation-header h1,
html.no-gpu .section-title .accent,
html.no-gpu .preloader-logo,
html.no-gpu .cin-word,
html.no-gpu .cin-line.cin-accent h2 {
  animation: none !important;
  background-position: 0% 50% !important;
}

/* Aurora orbs behind the homepage hero (css/elevated.css) — a pair of
   540px/460px circles with a permanent blur(80px) running a 14s
   transform/scale animation. Repainting an 80px blur over that much
   area every frame is one of the heaviest line items on a software
   compositor. Freeze the animation and drop the blur radius so the
   orbs settle into soft static gradients instead. */
html.no-gpu .hero-section::before,
html.no-gpu .hero-section::after {
  animation: none !important;
  filter: blur(40px) !important;
}

/* Large drop-shadow on the cinematic accent headline (css/cinematic.css)
   — a 50px-blur filter recomputed on every scroll-driven transform
   update from scripts/cinematic.js. */
html.no-gpu .cin-line.cin-accent h2 {
  filter: none !important;
}

/* Small glow drop-shadows on logos/icons (css/cairn-site.css,
   css/components.css) — cheap individually, but filter compositing
   adds up across a page full of effects already disabled above. */
html.no-gpu .navbar .logo img.logo-icon,
html.no-gpu .footer-logo {
  filter: none !important;
}

/* ===== cookie-consent.css ===== */
/* ============================================================
   COOKIE CONSENT BANNER
   Fixed bottom bar, matches Cairn dark/violet surface system.
   ============================================================ */
.cookie-consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: var(--el-surface-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--el-hairline-strong);
  box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, 0.6);
  animation: cookieBannerIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cookie-consent-banner[hidden] {
  display: none;
}
@keyframes cookieBannerIn {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-consent-banner { animation: none; }
}

.cookie-consent-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cookie-consent-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-dim, rgba(255, 255, 255, 0.7));
  flex: 1 1 320px;
}
.cookie-consent-text a {
  color: var(--el-violet-bright);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-consent-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Uses the shared button scale. This previously hard-set 10px 22px /
   0.88rem, which outranked the site button system by specificity and made
   the consent buttons the odd pair out on every page. */
.cookie-consent-actions .v-cta {
  padding: var(--btn-pad-md);
  font-size: var(--btn-size-md);
}

@media (max-width: 640px) {
  .cookie-consent-inner {
    padding: 18px 20px;
    flex-direction: column;
    align-items: stretch;
  }
  .cookie-consent-actions {
    justify-content: stretch;
  }
  .cookie-consent-actions .v-cta {
    flex: 1;
  }
}

/* ===== vitality-x.css ===== */
/* ============================================================
   VITALITY — interactive layer (vx-*)
   Home-only. Ported from the 21st.dev "Compare Slider" primitive
   (diceui) to vanilla: same clip-path model, same keyboard
   contract, no React.
   ============================================================ */

/* ---------- shared section chrome ---------- */
.vxc {
  position: relative;
  padding: clamp(72px, 9vw, 132px) 0 clamp(56px, 7vw, 96px);
}
.vxc-wrap {
  width: min(92vw, var(--el-maxw, 1240px));
  margin: 0 auto;
}

/* Editorial meta row: tiny tracked labels pinned to the section corners.
   Costs nothing and immediately reads art-directed. */
.vxc-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--el-hairline);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.vxc-meta span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.vxc-meta span b { color: var(--el-violet-bright); font-weight: 500; }

.vxc-head { max-width: 40ch; margin-bottom: clamp(28px, 4vw, 44px); }
.vxc-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--el-violet-bright);
  margin-bottom: 14px;
}
.vxc-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: var(--track-display);
  color: var(--text-light);
  text-wrap: balance;
  margin: 0 0 14px;
}
.vxc-title em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--el-violet-bright);
}
.vxc-sub {
  color: var(--text-dim);
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  max-width: 46ch;
  margin: 0;
}

/* ---------- compare slider ---------- */
.vx-compare {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  outline: none;
  width: 100%;
  aspect-ratio: 16 / 8;
  min-height: 300px;
  border: 1px solid var(--el-hairline);
  border-radius: var(--el-card-radius, 16px);
  background: #08070c;
  cursor: ew-resize;
}
.vx-compare:focus-visible {
  border-color: var(--el-violet);
  box-shadow: 0 0 0 3px rgba(var(--el-accent-rgb), 0.35);
}

/* Both panes stack; clip-path decides how much of each is visible.
   inset() is compositor-friendly, so dragging stays on the GPU. */
.vx-pane {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0;
  padding: clamp(18px, 2.4vw, 30px);
  will-change: clip-path;
}
.vx-pane-before { clip-path: inset(0 0 0 var(--vx-pos, 50%)); }
.vx-pane-after  { clip-path: inset(0 calc(100% - var(--vx-pos, 50%)) 0 0); }

.vx-pane-before {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(255,255,255,0.035), transparent 60%),
    linear-gradient(180deg, #0b0a0f 0%, #08070c 100%);
}
.vx-pane-after {
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(var(--el-accent-rgb), 0.14), transparent 62%),
    linear-gradient(180deg, #0c0913 0%, #08070c 100%);
}

/* readout row */
.vx-readout { display: flex; align-items: baseline; gap: 12px; }
.vx-fps {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--text-light);
}
.vx-pane-after .vx-fps { color: var(--el-violet-bright); }
.vx-fps-unit {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* frametime graph */
.vx-graph { align-self: center; width: 100%; height: 100%; max-height: 190px; }
.vx-graph svg { width: 100%; height: 100%; display: block; overflow: visible; }
.vx-graph .vx-grid line { stroke: rgba(255,255,255,0.05); stroke-width: 1; }
.vx-graph path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.vx-pane-before .vx-graph path { stroke: rgba(255,255,255,0.42); }
.vx-pane-after  .vx-graph path { stroke: var(--el-violet); filter: drop-shadow(0 0 6px rgba(var(--el-accent-rgb),0.5)); }
.vx-graph .vx-area { stroke: none; }
.vx-pane-before .vx-graph .vx-area { fill: rgba(255,255,255,0.05); }
.vx-pane-after  .vx-graph .vx-area { fill: rgba(var(--el-accent-rgb), 0.14); }

/* footer stats inside each pane */
.vx-pane-foot {
  display: flex;
  gap: clamp(16px, 3vw, 40px);
  flex-wrap: wrap;
}
.vx-pane-foot div { display: flex; flex-direction: column; gap: 3px; }
.vx-pane-foot dt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.vx-pane-foot dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}
.vx-pane-after .vx-pane-foot dd { color: var(--el-violet-bright); }

/* corner tag */
.vx-tag {
  position: absolute;
  top: 14px;
  z-index: 20;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--el-hairline-strong);
  border-radius: 999px;
  background: rgba(8,7,12,0.72);
  backdrop-filter: blur(6px);
  color: var(--text-dim);
}
.vx-tag-before { right: 14px; }
.vx-tag-after  { left: 14px; color: var(--el-violet-bright); border-color: rgba(var(--el-accent-rgb),0.4); }

/* handle */
.vx-handle {
  position: absolute;
  top: 0;
  left: var(--vx-pos, 50%);
  transform: translateX(-50%);
  height: 100%;
  width: 44px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.vx-handle::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--el-violet) 12%, var(--el-violet) 88%, transparent);
}
.vx-knob {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(12,10,18,0.9);
  border: 1px solid rgba(var(--el-accent-rgb), 0.55);
  box-shadow: 0 0 0 6px rgba(var(--el-accent-rgb), 0.10), 0 10px 30px -8px rgba(0,0,0,0.9);
  transition: transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.vx-compare:hover .vx-knob { transform: scale(1.06); }
.vx-compare.is-dragging .vx-knob {
  transform: scale(0.96);
  box-shadow: 0 0 0 10px rgba(var(--el-accent-rgb), 0.14), 0 10px 30px -8px rgba(0,0,0,0.9);
}
.vx-knob svg { width: 16px; height: 16px; stroke: var(--el-violet-bright); }

.vx-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
  transition: opacity var(--duration-base) var(--ease-standard);
}
.vx-compare-shell.is-touched .vx-hint { opacity: 0; }

@media (max-width: 700px) {
  .vx-compare { aspect-ratio: 4 / 5; min-height: 420px; }
  .vx-fps { font-size: clamp(2rem, 11vw, 3rem); }
  .vx-pane-foot { gap: 14px; }
}

/* ---------- magnetic CTA ---------- */
.vx-mag { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .vx-mag { transform: none !important; }
  .vx-knob { transition: none; }
}

/* ============================================================
   SHARED INTERACTIVE LAYER — loaded on every page
   ============================================================ */

/* ---------- spotlight-follow cards ----------
   A pointer-tracked radial highlight on the card surface. Uses a
   ::before overlay so the card's own background/border are untouched,
   and only opacity animates, which stays off the main thread. */
.vx-spot { position: relative; }
.vx-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-base, .35s) var(--ease-standard);
  background: radial-gradient(
    380px circle at var(--vx-mx, 50%) var(--vx-my, 50%),
    rgba(var(--el-accent-rgb), 0.16),
    transparent 62%
  );
  z-index: 0;
}
.vx-spot:hover::before { opacity: 1; }
/* Keep real content above the wash. */
.vx-spot > * { position: relative; z-index: 1; }

/* ---------- inner-page meta row ----------
   Tiny tracked corner labels above the page title. */
.vx-pagemeta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: clamp(18px, 2.6vw, 28px);
  padding-bottom: clamp(14px, 2vw, 20px);
  border-bottom: 1px solid var(--el-hairline);
}
.vx-pagemeta span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.vx-pagemeta b { color: var(--el-violet-bright); font-weight: 500; }

/* ---------- marquee ---------- */
.vx-marquee {
  position: relative;
  overflow: hidden;
  padding: 18px 0;
  border-block: 1px solid var(--el-hairline);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.vx-marquee-track {
  display: flex;
  width: max-content;
  gap: clamp(28px, 4vw, 56px);
  animation: vx-scroll var(--vx-speed, 38s) linear infinite;
}
.vx-marquee:hover .vx-marquee-track { animation-play-state: paused; }
.vx-marquee-track span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.vx-marquee-track span::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--el-violet);
  opacity: .7;
}
@keyframes vx-scroll { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .vx-marquee-track { animation: none; }
  .vx-spot::before { transition: none; }
}

/* ============================================================
   ACCESSIBILITY UTILITIES
   ============================================================ */

/* Visually hidden but still read by screen readers. Used for labels on
   controls that are visually self-evident (a search field with a magnifier
   icon) but had no accessible name at all. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Standard pattern: becomes visible when focused, so skip-links work. */
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  position: static !important;
  width: auto; height: auto;
  margin: 0; overflow: visible;
  clip: auto; clip-path: none;
  white-space: normal;
}

/* ---------- tap targets ----------
   The audit found 15-29 controls per page under 28px. Pointer-coarse
   devices need a comfortable target; a pseudo-element expands the hit
   area without changing the visual size or the layout. */
@media (pointer: coarse) {
  .footer a,
  .footer-column a,
  .nav-links a,
  .social-links a,
  .docs-nav a {
    position: relative;
  }
  .footer a::after,
  .footer-column a::after,
  .nav-links a::after,
  .social-links a::after,
  .docs-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    transform: translateY(-50%);
    min-height: 44px;
    /* Sits behind the text so it never blocks its own click. */
    z-index: -1;
  }
}

/* Visible focus for keyboard users, sitewide. Uses the accent so it reads
   as designed rather than the UA default outline. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--el-violet);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 4px);
}

/* ============================================================
   UNIFIED BUTTON SYSTEM
   The audit found 16 distinct button specifications across the site:
   4 radii (5 / 12 / 999 / 9999px), 5 font sizes (14 / 14.08 / 14.4 /
   15.2 / 16px) and 6 padding pairs, spread over six unrelated families
   (.v-cta, .cta-button, .cr-btn, .pcard-btn, .nav-cta, .preloader-skip).
   Controls that do the same job rendered differently on every page.

   This normalises geometry and typography onto one scale while leaving
   each family's own colour treatment intact, so nothing is restyled
   out of its context.
   ============================================================ */

:root {
  --btn-r:        999px;          /* one radius, the pill 3 of 6 already used */
  --btn-track:    0.01em;
  --btn-weight:   600;

  --btn-pad-sm:   9px 16px;
  --btn-pad-md:   13px 24px;
  --btn-pad-lg:   16px 32px;
  --btn-size-sm:  13px;
  --btn-size-md:  14.5px;
  --btn-size-lg:  16px;
}

/* --- shared geometry + interaction contract --- */
.v-cta,
.cta-button,
.cr-btn,
.pcard-btn,
.nav-cta,
.preloader-skip-button {
  border-radius: var(--btn-r);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-track);
  line-height: 1.15;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  white-space: nowrap;
  transition:
    transform    var(--duration-fast) var(--ease-standard),
    background   var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow   var(--duration-fast) var(--ease-standard),
    color        var(--duration-fast) var(--ease-standard);
}

/* --- size scale --- */
.nav-cta,
.preloader-skip-button {
  padding: var(--btn-pad-sm);
  font-size: var(--btn-size-sm);
}
.v-cta,
.cr-btn,
.pcard-btn {
  padding: var(--btn-pad-md);
  font-size: var(--btn-size-md);
}
.cta-button {
  padding: var(--btn-pad-lg);
  font-size: var(--btn-size-lg);
}

/* --- interaction states, previously inconsistent or missing --- */
.v-cta:hover,
.cta-button:hover,
.cr-btn:hover,
.pcard-btn:hover,
.nav-cta:hover,
.preloader-skip-button:hover { transform: translateY(-1px); }

/* Press returns to rest so the control feels physical rather than sticky. */
.v-cta:active,
.cta-button:active,
.cr-btn:active,
.pcard-btn:active,
.nav-cta:active,
.preloader-skip-button:active { transform: translateY(0) scale(0.985); }

.v-cta:disabled,
.cta-button:disabled,
.cr-btn:disabled,
.pcard-btn:disabled,
.preloader-skip-button:disabled,
.v-cta[aria-disabled="true"],
.cta-button[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .v-cta, .cta-button, .cr-btn, .pcard-btn, .nav-cta, .preloader-skip-button {
    transition: background var(--duration-fast) linear, color var(--duration-fast) linear;
  }
  .v-cta:hover, .cta-button:hover, .cr-btn:hover,
  .pcard-btn:hover, .nav-cta:hover, .preloader-skip-button:hover,
  .v-cta:active, .cta-button:active, .cr-btn:active,
  .pcard-btn:active, .nav-cta:active, .preloader-skip-button:active {
    transform: none;
  }
}