/* Map Nexsas Inter Tight tokens to app Inter (next/font --font-sans). */
:root {
  --font-inter-tight: var(--font-sans), "Inter", system-ui, sans-serif;
}

/* Hero light/dark images follow theme class, not OS */
html.light .nexsas-hero-light,
html:not(.dark) .nexsas-hero-light {
  display: block !important;
}
html.light .nexsas-hero-dark,
html:not(.dark) .nexsas-hero-dark {
  display: none !important;
}
html.dark .nexsas-hero-light {
  display: none !important;
}
html.dark .nexsas-hero-dark {
  display: block !important;
}

/*
 * Safety: if any leftover media-query dark: rules invert the logo,
 * force correct logos under html.light|dark.
 */
html.light img[src*="main-logo.svg"],
html.light img[src*="logo.svg"]:not([src*="logo-dark"]):not([src*="dark-logo"]) {
  filter: none !important;
}
html.light img[src*="logo-dark.svg"],
html.light img[src*="dark-logo.svg"] {
  display: none !important;
}
/* colored Lucenta.ai mark — do not invert */

/* Do not let app chrome paint marketing links white */
body.nexsas-marketing {
  color: inherit;
}

/* Filled buttons: white label (unlayered globals were overriding Nexsas @layer colors) */
body.nexsas-marketing a.btn-primary,
body.nexsas-marketing a.btn-secondary,
body.nexsas-marketing a.btn-dark,
body.nexsas-marketing button.btn-primary,
body.nexsas-marketing button.btn-secondary,
body.nexsas-marketing button.btn-dark,
body.nexsas-marketing .btn.btn-primary,
body.nexsas-marketing .btn.btn-secondary,
body.nexsas-marketing .btn.btn-dark {
  color: #ffffff !important;
}
body.nexsas-marketing a.btn-primary *,
body.nexsas-marketing a.btn-secondary *,
body.nexsas-marketing a.btn-dark *,
body.nexsas-marketing .btn.btn-primary *,
body.nexsas-marketing .btn.btn-secondary *,
body.nexsas-marketing .btn.btn-dark * {
  color: inherit !important;
}

/* Dark-mode: dark label on light-filled CTAs (accent / white / lucenta-btn-surface). */
html.dark body.nexsas-marketing a.btn-secondary.dark\:btn-accent,
html.dark body.nexsas-marketing .btn.btn-secondary.dark\:btn-accent,
html.dark body.nexsas-marketing a.dark\:btn-accent,
html.dark body.nexsas-marketing .btn.dark\:btn-accent,
html.dark body.nexsas-marketing a.dark\:btn-white,
html.dark body.nexsas-marketing .btn.dark\:btn-white,
html.dark body.nexsas-marketing a.btn-accent,
html.dark body.nexsas-marketing .btn.btn-accent,
html.dark body.nexsas-marketing a.btn-white,
html.dark body.nexsas-marketing .btn.btn-white {
  color: #1a1a1c !important;
}
html.dark body.nexsas-marketing a.btn-secondary.dark\:btn-accent *,
html.dark body.nexsas-marketing .btn.btn-secondary.dark\:btn-accent *,
html.dark body.nexsas-marketing a.dark\:btn-accent *,
html.dark body.nexsas-marketing .btn.dark\:btn-accent *,
html.dark body.nexsas-marketing a.dark\:btn-white *,
html.dark body.nexsas-marketing .btn.dark\:btn-white *,
html.dark body.nexsas-marketing a.btn-accent *,
html.dark body.nexsas-marketing .btn.btn-accent *,
html.dark body.nexsas-marketing a.btn-white *,
html.dark body.nexsas-marketing .btn.btn-white * {
  color: inherit !important;
}

/* Dark-mode outline / transparent CTAs on dark fills: force light label.
 * btn-light / lucenta-btn-surface stay white+dark text (see below). */
html.dark body.nexsas-marketing a.dark\:btn-white-dark:not(.lucenta-btn-surface),
html.dark body.nexsas-marketing .btn.dark\:btn-white-dark:not(.lucenta-btn-surface),
html.dark body.nexsas-marketing a.btn-white-dark:not(.lucenta-btn-surface),
html.dark body.nexsas-marketing .btn.btn-white-dark:not(.lucenta-btn-surface),
html.dark body.nexsas-marketing a.dark\:btn-transparent,
html.dark body.nexsas-marketing .btn.dark\:btn-transparent {
  color: #fcfcfc !important;
}
html.dark body.nexsas-marketing a.dark\:btn-white-dark:not(.lucenta-btn-surface) *,
html.dark body.nexsas-marketing .btn.dark\:btn-white-dark:not(.lucenta-btn-surface) *,
html.dark body.nexsas-marketing a.btn-white-dark:not(.lucenta-btn-surface) *,
html.dark body.nexsas-marketing .btn.btn-white-dark:not(.lucenta-btn-surface) *,
html.dark body.nexsas-marketing a.dark\:btn-transparent *,
html.dark body.nexsas-marketing .btn.dark\:btn-transparent * {
  color: inherit !important;
}

/* Light surface CTAs (View models, Explore all models): white fill + dark text
 * in both themes; hover → light gray (same look as light mode). */
body.nexsas-marketing a.lucenta-btn-surface,
body.nexsas-marketing .btn.lucenta-btn-surface {
  background-color: #ffffff !important;
  color: #1a1a1c !important;
  border-color: transparent !important;
}
body.nexsas-marketing a.lucenta-btn-surface *,
body.nexsas-marketing .btn.lucenta-btn-surface * {
  color: inherit !important;
}
body.nexsas-marketing a.lucenta-btn-surface:hover,
body.nexsas-marketing .btn.lucenta-btn-surface:hover,
html.dark body.nexsas-marketing a.lucenta-btn-surface:hover,
html.dark body.nexsas-marketing .btn.lucenta-btn-surface:hover {
  background-color: #e8e8ea !important;
  color: #1a1a1c !important;
}
html.dark body.nexsas-marketing a.lucenta-btn-surface,
html.dark body.nexsas-marketing .btn.lucenta-btn-surface,
html.dark body.nexsas-marketing a.btn-light.lucenta-btn-surface,
html.dark body.nexsas-marketing .btn.btn-light.lucenta-btn-surface {
  background-color: #ffffff !important;
  color: #1a1a1c !important;
}

/* Homepage section titles match the Help / Models heroes.
   h2 only: the hero h1 keeps its own larger rule. */
body.nexsas-marketing h2.lucenta-hero-title {
  font-size: clamp(36px, 5vw, 56px) !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em;
  color: var(--color-secondary);
}
html.dark body.nexsas-marketing h2.lucenta-hero-title {
  color: var(--color-accent);
}

/* Same violet pill as the Help center / Models kickers. */
body.nexsas-marketing .lucenta-kicker,
body.nexsas-marketing .lucenta-kicker:where(.dark, .dark *) {
  margin-bottom: 16px;
  background-color: rgba(136, 42, 255, 0.1);
  color: var(--color-primary-500);
  font-size: 0.8rem;
  text-transform: none;
}
html.dark body.nexsas-marketing .lucenta-kicker {
  background-color: rgba(136, 42, 255, 0.18);
}

/* Lucenta.ai brand violet from logo (#b58cff → #882AFF); replace Nexsas #864ffe */
:root,
:host,
html.light,
html.dark {
  --color-primary-50: #f4efff;
  --color-primary-400: #b58cff;
  --color-primary-500: #882AFF;
  --color-primary-600: #7018d4;
}

/* Violet primary CTAs: darker hover (#7018d4), never flip to secondary/black */
body.nexsas-marketing a.btn-primary:hover,
body.nexsas-marketing button.btn-primary:hover,
body.nexsas-marketing .btn.btn-primary:hover,
body.nexsas-marketing a.btn-primary:focus-visible,
body.nexsas-marketing button.btn-primary:focus-visible,
body.nexsas-marketing .btn.btn-primary:focus-visible {
  background-color: #7018d4 !important;
  border-color: #5e14b5 !important;
  color: #ffffff !important;
}
body.nexsas-marketing a.btn-primary:hover *,
body.nexsas-marketing button.btn-primary:hover *,
body.nexsas-marketing .btn.btn-primary:hover * {
  color: inherit !important;
}

/* Other violet fills (tabs, chips using primary-500) */
body.nexsas-marketing .bg-primary-500:hover:not([aria-disabled="true"]):not(:disabled) {
  background-color: #7018d4 !important;
}

/* Feature v3 stack-cards — missing from Lucenta main.css */
.border-stroke-1\/20 {
  border-color: color-mix(in oklab, var(--color-stroke-1) 20%, transparent);
}
.max-w-\[505px\] {
  max-width: 505px;
}
:where(.md\:space-y-10 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
}
@media (min-width: 64rem) {
  .lg\:top-28 {
    top: calc(var(--spacing) * 28);
  }
  .lg\:gap-y-20 {
    row-gap: calc(var(--spacing) * 20);
  }
  .lg\:max-w-\[598px\] {
    max-width: 598px;
  }
  .lg\:max-w-\[505px\] {
    max-width: 505px;
  }
  .lg\:space-y-14 > :not(:last-child) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 14) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 14) * calc(1 - var(--tw-space-y-reverse)));
  }
}
@media (min-width: 80rem) {
  .xl\:col-span-6 {
    grid-column: span 6 / span 6;
  }
  .xl\:max-w-\[562px\] {
    max-width: 562px;
  }
  .xl\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* Kill Nexsas CTA hover arrow (everywhere) */
.btn:before,
.btn::before,
.btn:hover:before,
.btn:hover::before {
  content: none !important;
  display: none !important;
  background-image: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  transform: none !important;
  translate: none !important;
}
.btn:hover span {
  --tw-translate-x: 0 !important;
  translate: none !important;
  transform: none !important;
}

/* Preserve authored button casing (Nexsas forces lowercase) */
.btn,
.btn span,
.btn span:first-letter {
  text-transform: none !important;
}


/* === lucenta hero full-viewport (screen2) === */
.nexsas-landing-root .hero-section.lucenta-hero-full {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding-top: 110px;
  padding-bottom: 48px;
  background-color: #f7f5fb;
}
html.dark .nexsas-landing-root .hero-section.lucenta-hero-full,
.dark .nexsas-landing-root .hero-section.lucenta-hero-full {
  background-color: #0e0f14;
}

/* CSS hero blob — same aspect as former ns-img-221 (1484×1250), cover-like */
.nexsas-landing-root .lucenta-hero-blob {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.nexsas-landing-root .lucenta-hero-blob::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 1484 / 1250;
  /* cover: at least fill section, keep 1484:1250 */
  width: max(100%, calc(100dvh * 1484 / 1250));
  max-width: none;
  height: auto;
  background-image:
    radial-gradient(37.3% 34.4% at 61.9% 41.5%, rgba(153,93,241,.232) 0%, rgba(153,93,241,.221) 10%, rgba(153,93,241,.19) 20%, rgba(153,93,241,.148) 30%, rgba(153,93,241,.104) 40%, rgba(153,93,241,.067) 50%, rgba(153,93,241,.038) 60%, rgba(153,93,241,.02) 70%, rgba(153,93,241,.009) 80%, rgba(153,93,241,.004) 90%, rgba(153,93,241,.002) 100%, transparent 100%),
    radial-gradient(36.7% 37.4% at 36.6% 31.8%, rgba(122,231,245,.203) 0%, rgba(122,231,245,.194) 10%, rgba(122,231,245,.168) 20%, rgba(122,231,245,.134) 30%, rgba(122,231,245,.096) 40%, rgba(122,231,245,.064) 50%, rgba(122,231,245,.038) 60%, rgba(122,231,245,.021) 70%, rgba(122,231,245,.01) 80%, rgba(122,231,245,.005) 90%, rgba(122,231,245,.002) 100%, transparent 100%),
    radial-gradient(33.1% 40.2% at 58.1% 55.9%, rgba(252,184,163,.507) 0%, rgba(252,184,163,.487) 10%, rgba(252,184,163,.431) 20%, rgba(252,184,163,.352) 30%, rgba(252,184,163,.265) 40%, rgba(252,184,163,.184) 50%, rgba(252,184,163,.118) 60%, rgba(252,184,163,.07) 70%, rgba(252,184,163,.038) 80%, rgba(252,184,163,.019) 90%, rgba(252,184,163,.009) 100%, transparent 100%),
    radial-gradient(30.5% 47.9% at 47.4% 51.1%, rgba(252,186,162,.336) 0%, rgba(252,186,162,.319) 10%, rgba(252,186,162,.274) 20%, rgba(252,186,162,.213) 30%, rgba(252,186,162,.149) 40%, rgba(252,186,162,.094) 50%, rgba(252,186,162,.054) 60%, rgba(252,186,162,.028) 70%, rgba(252,186,162,.013) 80%, rgba(252,186,162,.005) 90%, rgba(252,186,162,.002) 100%, transparent 100%),
    radial-gradient(36.6% 36.7% at 63.2% 27.6%, rgba(130,76,254,.231) 0%, rgba(130,76,254,.221) 10%, rgba(130,76,254,.194) 20%, rgba(130,76,254,.156) 30%, rgba(130,76,254,.115) 40%, rgba(130,76,254,.077) 50%, rgba(130,76,254,.048) 60%, rgba(130,76,254,.027) 70%, rgba(130,76,254,.014) 80%, rgba(130,76,254,.007) 90%, rgba(130,76,254,.003) 100%, transparent 100%),
    radial-gradient(32.5% 42% at 33.9% 41.5%, rgba(141,231,230,.322) 0%, rgba(141,231,230,.308) 10%, rgba(141,231,230,.269) 20%, rgba(141,231,230,.216) 30%, rgba(141,231,230,.158) 40%, rgba(141,231,230,.106) 50%, rgba(141,231,230,.065) 60%, rgba(141,231,230,.037) 70%, rgba(141,231,230,.019) 80%, rgba(141,231,230,.009) 90%, rgba(141,231,230,.004) 100%, transparent 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.nexsas-landing-root .lucenta-hero-stack {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.nexsas-landing-root .lucenta-hero-full h1.lucenta-hero-title {
  font-size: clamp(2.75rem, 7vw, 5.25rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.03em;
  max-width: 18ch;
  margin-bottom: 1rem;
  color: #1a1a1c;
}
html.dark .nexsas-landing-root .lucenta-hero-full h1.lucenta-hero-title,
.dark .nexsas-landing-root .lucenta-hero-full h1.lucenta-hero-title {
  color: #ffffff;
}

.nexsas-landing-root .lucenta-hero-full .lucenta-hero-sub {
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: 1.45;
  color: rgba(26, 26, 28, 0.55);
  max-width: 34rem;
  margin-bottom: 1.75rem;
}
html.dark .nexsas-landing-root .lucenta-hero-full .lucenta-hero-sub,
.dark .nexsas-landing-root .lucenta-hero-full .lucenta-hero-sub {
  color: rgba(255, 255, 255, 0.7);
}

.nexsas-landing-root .lucenta-hero-full .lucenta-hero-ctas {
  margin-bottom: 1.5rem;
}

.nexsas-landing-root .lucenta-hero-full .lucenta-hero-providers {
  margin-top: 1.75rem;
  margin-bottom: 0;
}

.lucenta-price-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  /* Fixed so the pill is the same width before the model loads and after. */
  width: 28rem;
  padding: 0.7rem 1.1rem 0.7rem 1.25rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(26, 26, 28, 0.06);
  box-shadow: 0 8px 28px rgba(26, 26, 28, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lucenta-price-pill__content {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: nowrap;
  justify-content: center;
  white-space: nowrap;
  max-width: 100%;
  transition: opacity 0.45s ease;
}

.lucenta-price-pill__content.is-out {
  opacity: 0;
}

.lucenta-price-pill__content.is-in {
  opacity: 1;
}

/* Shown until the model list arrives. Same size and background as the real
   pill, so the white card is there on the first paint instead of popping in. */
.lucenta-price-pill--empty {
  min-height: 3.4rem;
}
.lucenta-price-pill__bar {
  display: block;
  height: 0.85rem;
  border-radius: 6px;
  background: rgba(26, 26, 28, 0.1);
}
.lucenta-price-pill__bar--id { width: 7.5rem; }
.lucenta-price-pill__bar--price { width: 3.2rem; }
.lucenta-price-pill__bar--badge { width: 3.4rem; height: 1.5rem; border-radius: 9999px; }
html.dark .lucenta-price-pill {
  background: rgba(26, 26, 28, 0.55);
  border-color: rgba(255, 255, 255, 0.08);
}
html.dark .lucenta-price-pill__bar { background: rgba(255, 255, 255, 0.14); }
html.dark .lucenta-price-pill__id,
html.dark .lucenta-price-pill__sell { color: #fff; }
html.dark .lucenta-price-pill__list,
html.dark .lucenta-price-pill__unit { color: rgba(255, 255, 255, 0.55); }

.lucenta-price-pill__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a1a1c;
}

.lucenta-price-pill__list {
  font-size: 0.9rem;
  color: rgba(26, 26, 28, 0.45);
  text-decoration: line-through;
}

.lucenta-price-pill__sell {
  font-size: 0.95rem;
  color: #1a1a1c;
}

.lucenta-price-pill__sell strong {
  font-weight: 700;
}

.lucenta-price-pill__unit {
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(26, 26, 28, 0.45);
}

.lucenta-price-pill__unit-short {
  display: none;
}

.lucenta-price-pill__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.28rem 0.65rem;
  border-radius: 9999px;
  background: #0f766e;
  color: #fff !important;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

/* Keep model + prices + badge on one row on narrow screens */
@media (max-width: 640px) {
  .lucenta-price-pill {
    min-width: 0;
    width: auto;
    max-width: min(100%, calc(100vw - 1.5rem));
    padding: 0.42rem 0.55rem 0.42rem 0.7rem;
  }
  .lucenta-price-pill__content {
    gap: clamp(0.25rem, 1.6vw, 0.45rem);
  }
  .lucenta-price-pill__id {
    width: auto;
    max-width: 34vw;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(0.62rem, 2.9vw, 0.82rem);
    flex-shrink: 1;
  }
  .lucenta-price-pill__list {
    font-size: clamp(0.62rem, 2.7vw, 0.78rem);
    flex-shrink: 0;
  }
  .lucenta-price-pill__sell {
    font-size: clamp(0.62rem, 2.9vw, 0.82rem);
    flex-shrink: 0;
  }
  .lucenta-price-pill__unit-full {
    display: none;
  }
  .lucenta-price-pill__unit-short {
    display: inline;
  }
  .lucenta-price-pill__unit {
    font-size: clamp(0.55rem, 2.4vw, 0.7rem);
  }
  .lucenta-price-pill__badge {
    padding: 0.18rem 0.42rem;
    font-size: clamp(0.58rem, 2.5vw, 0.72rem);
  }
}

/* === lucenta feature icons (Why Lucenta) === */
.lucenta-feature-icon {
  color: #1a1a1c;
  line-height: 0;
}
.lucenta-feature-icon svg {
  display: block;
}
html.dark .lucenta-feature-icon {
  color: #1a1a1c;
}

/* Nav theme toggle — simple sun/moon in the pill header */
header #theme-toggle.lucenta-nav-theme-toggle,
.lucenta-nav-theme-toggle {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(15, 23, 42, 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: auto !important;
  overflow: visible;
}
html.dark header #theme-toggle.lucenta-nav-theme-toggle,
html.dark .lucenta-nav-theme-toggle {
  color: rgba(255, 255, 255, 0.7);
}
header #theme-toggle.lucenta-nav-theme-toggle:hover,
.lucenta-nav-theme-toggle:hover {
  color: #0f172a;
  background: transparent !important;
}
html.dark header #theme-toggle.lucenta-nav-theme-toggle:hover,
html.dark .lucenta-nav-theme-toggle:hover {
  color: #fff;
}
header #theme-toggle.lucenta-nav-theme-toggle::before,
header #theme-toggle.lucenta-nav-theme-toggle::after,
.lucenta-nav-theme-toggle::before,
.lucenta-nav-theme-toggle::after {
  content: none !important;
  display: none !important;
}
header #theme-toggle.lucenta-nav-theme-toggle svg,
.lucenta-nav-theme-toggle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

/* Theme toggle: no slide animation on icon swap */
header #theme-toggle.lucenta-nav-theme-toggle > span,
.lucenta-nav-theme-toggle > span {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}

/* In-page anchors: clear fixed pill nav */
#integration,
#about,
#models,
#faq {
  scroll-margin-top: 96px;
}

/* === mobile marketing menu (screen2) === */
.lucenta-mnav-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
  padding-bottom: max(1.25rem, calc(env(safe-area-inset-bottom, 0px) + 1rem));
}
.lucenta-mnav-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 1.25rem;
}
.lucenta-mnav {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.lucenta-mnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.lucenta-mnav__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0.9rem;
  border-radius: 1.1rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.lucenta-mnav__item:hover {
  background: rgba(136, 42, 255, 0.06);
}
html.dark .lucenta-mnav__item:hover {
  background: rgba(136, 42, 255, 0.12);
}
.lucenta-mnav__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #efe4ff;
  color: #882AFF;
}
html.dark .lucenta-mnav__icon {
  background: rgba(136, 42, 255, 0.22);
  color: #c9a6ff;
}
.lucenta-mnav__copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.lucenta-mnav__title {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: #1a1a1c;
  line-height: 1.2;
}
html.dark .lucenta-mnav__title {
  color: #f3f0f8;
}
.lucenta-mnav__sub {
  font-size: 0.8rem;
  font-weight: 450;
  color: rgba(26, 26, 28, 0.55);
  line-height: 1.35;
}
html.dark .lucenta-mnav__sub {
  color: rgba(243, 240, 248, 0.55);
}
.lucenta-mnav__chev {
  flex-shrink: 0;
  color: rgba(26, 26, 28, 0.35);
  display: inline-flex;
}
html.dark .lucenta-mnav__chev {
  color: rgba(243, 240, 248, 0.4);
}
.lucenta-mnav__cta {
  margin-top: auto;
  padding-top: 1.25rem;
  padding-bottom: max(1.5rem, calc(env(safe-area-inset-bottom, 0px) + 1.25rem));
}
.lucenta-mnav__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.9rem 1.25rem;
  border-radius: 9999px;
  background: #882AFF;
  color: #fff !important;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(136, 42, 255, 0.28);
  transition: background 0.15s ease, transform 0.15s ease;
}
.lucenta-mnav__btn:hover {
  background: #7018d4;
}

/* === lucenta nav: no entrance flash, no scroll-header top jump === */
/* Centering via .lucenta-nav-bar flex. Pill stays put on scroll. */
.lucenta-nav-bar {
  top: 1.25rem !important; /* top-5 — ignore theme scroll tweaks on children */
}
.lucenta-nav-bar .header-one,
.lucenta-nav-bar .header-one.scroll-header {
  top: auto !important;
  transform: none !important;
  animation: none !important;
  opacity: 1 !important;
  filter: none !important;
  transition: none !important;
}
.nexsas-landing-root .header-one[data-lucenta-nav] {
  animation: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* === lucenta auth nav (no Login/CTA flash) === */
/* SSR sets data-lucenta-session from httpOnly cookie; client may refine. */
#lucenta-landing-ssr[data-lucenta-session="1"] [data-lucenta-login],
#lucenta-landing-ssr[data-lucenta-session="1"] [data-lucenta-cta-guest] {
  display: none !important;
}
#lucenta-landing-ssr:not([data-lucenta-session="1"]) [data-lucenta-cta-authed] {
  display: none !important;
}

/* footer email wordmark — same color as Terms/Privacy (footer-link-v2) */
a.footer-email-wordmark.footer-link-v2 {
  overflow: visible;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}
a.footer-email-wordmark.footer-link-v2:before {
  display: none;
}
a.footer-email-wordmark svg {
  height: 1.1rem;
  width: auto;
  display: block;
  fill: currentColor;
}

/* Footer link typography tweaks */
.footer-link-v2 {
  font-size: 0.9rem;
  line-height: normal;
}
.footer-legal-inline { display: flex; gap: 0.3rem; align-items: baseline; }
a.footer-email-wordmark svg {
  height: 1.1rem;
}

/* Footer link columns: 2-up mobile, 3-up desktop (CSS grid — public HTML) */
.footer-link-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
.footer-col-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-col-title {
  margin: 0 0 1rem;
}
.footer-col--legal {
  grid-column: 1 / -1;
}
@media (max-width: 767px) {
  .footer-three .footer-main-grid {
    row-gap: 1.5rem;
    padding-top: 2.25rem;
    padding-bottom: 1.75rem;
  }
  .footer-col-inner {
    height: 100%;
    padding: 0.8rem 0.85rem;
    border-radius: 1rem;
    background: color-mix(in oklab, #882aff 6%, #fff);
    border: 1px solid color-mix(in oklab, #882aff 10%, transparent);
  }
  html.dark .footer-col-inner {
    background: color-mix(in oklab, #882aff 14%, transparent);
    border-color: color-mix(in oklab, #882aff 22%, transparent);
  }
  .footer-col-title {
    margin: 0 0 0.8rem;
    font-size: 0.75rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.58;
    line-height: 1.2;
  }
  .footer-col-list {
    gap: 0.3rem;
  }
  .footer-col-list--legal {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.35rem 0.75rem;
    align-items: center;
  }
  .footer-col-list .footer-link-v2 {
    /* size from .footer-link-v2 */
  }
  .footer-col-list--legal .footer-email-wordmark {
    grid-column: 1 / -1;
    margin-top: 0.15rem;
  }
  a.footer-email-wordmark svg {
    height: 1.1rem;
  }
}
@media (min-width: 768px) {
  .footer-link-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 1.5rem;
  }
  .footer-col--legal {
    grid-column: auto;
  }
  .footer-col-inner {
    background: transparent;
    border: 0;
    padding: 0;
  }
  .footer-col-list {
    gap: 1rem;
  }
}

/*
 * Auth pages (/login, /signup, /forgot-password, /reset-password) share AuthShell.
 * The Nexsas background tokens have no dark variant, so the page stays white while
 * the inputs go dark. Flip the surfaces and the near-black label text here.
 */
html.dark .auth-shell {
  background: #0e0f14;
}

html.dark .auth-shell-card {
  background: #16181f;
  border-color: rgba(255, 255, 255, 0.1);
}

html.dark .auth-shell .text-secondary,
html.dark .auth-shell .text-secondary\/70 {
  color: rgba(255, 255, 255, 0.72);
}

html.dark .auth-shell .text-secondary\/70 {
  color: rgba(255, 255, 255, 0.55);
}

html.dark .auth-shell .bg-stroke-1 {
  background-color: rgba(255, 255, 255, 0.14);
}

/* The wordmark is near-black by default. On the dark page it has to be white,
   and link hovers must not fall back to that same near-black. */
html.dark .auth-shell .auth-wordmark {
  color: #fff;
}

html.dark .auth-shell a:hover {
  color: rgba(255, 255, 255, 0.55);
}