/* uxspire website migration layer
   Loaded after page fragments so legacy page-level CSS resolves to the design system. */

:root {
  --ux-bg: var(--background) !important;
  --ux-surface: var(--card) !important;
  --ux-surface-soft: var(--muted) !important;
  --ux-border: var(--border) !important;
  --ux-ink: var(--foreground) !important;
  --ux-ink-muted: var(--muted-foreground) !important;
  --ux-accent: var(--primary) !important;
  --ux-accent-strong: color-mix(in oklch, var(--primary) 88%, black) !important;
  --ux-accent-soft: var(--primary-12) !important;
  --ux-contrast: var(--chart-2) !important;
  --ux-contrast-soft: color-mix(in oklch, var(--chart-2) 14%, transparent) !important;
  --ux-mint: var(--chart-3) !important;
  --ux-mint-soft: color-mix(in oklch, var(--chart-3) 14%, transparent) !important;
  --ux-radius-sm: var(--radius-sm) !important;
  --ux-radius-md: var(--radius-md) !important;
  --ux-radius-lg: var(--radius-lg) !important;
  --ux-shadow-sm: var(--shadow-sm) !important;
  --ux-shadow-md: var(--shadow-md) !important;
  --ux-shadow-lg: var(--shadow-lg) !important;
}

body,
body.bg-white,
.dark body {
  background: var(--background) !important;
  color: var(--foreground) !important;
}

/* Tailwind color compatibility for the existing static markup. */
.bg-white,
.bg-gray-50,
.bg-primary-50,
.bg-primary-50\/30,
.bg-amber-50,
.bg-yellow-50,
.bg-red-50,
.bg-green-50,
.bg-teal-50 {
  background-color: var(--background) !important;
}

.bg-gray-100,
.bg-gray-200,
.bg-primary-100,
.bg-amber-100,
.bg-yellow-100,
.bg-red-100,
.bg-green-100,
.bg-teal-100 {
  background-color: var(--muted) !important;
}

.bg-gray-800,
.bg-gray-900,
.bg-dark-800,
.bg-dark-900,
.dark .dark\:bg-dark-900,
.dark .dark\:bg-dark-800,
.dark .dark\:bg-gray-900,
.dark .dark\:bg-gray-800,
.dark .dark\:bg-gray-900\/70 {
  background-color: var(--background) !important;
}

.bg-primary-500,
.bg-primary-600,
.bg-primary-700,
.bg-primary-800,
.bg-amber-500,
.bg-amber-600,
.bg-orange-500,
.bg-orange-600,
.hover\:bg-primary-700:hover,
.hover\:bg-primary-800:hover {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

.text-gray-900,
.text-gray-800,
.text-gray-700,
.dark .dark\:text-white,
.dark .dark\:text-gray-100,
.dark .dark\:text-gray-200 {
  color: var(--foreground) !important;
}

.text-gray-600,
.text-gray-500,
.text-gray-400,
.dark .dark\:text-gray-300,
.dark .dark\:text-gray-400 {
  color: var(--muted-foreground) !important;
}

.text-primary-300,
.text-primary-400,
.text-primary-500,
.text-primary-600,
.text-primary-700,
.text-amber-500,
.text-amber-600,
.text-orange-600,
.hover\:text-primary-600:hover,
.hover\:text-primary-700:hover,
.dark .dark\:text-primary-300,
.dark .dark\:text-primary-400 {
  color: var(--primary) !important;
}

.border-gray-100,
.border-gray-200,
.border-gray-300,
.border-primary-200,
.border-primary-300,
.border-amber-200,
.border-amber-300,
.border-red-200,
.border-green-200,
.dark .dark\:border-gray-700,
.dark .dark\:border-gray-800,
.dark .dark\:border-primary-700,
.dark .dark\:border-amber-700 {
  border-color: var(--border) !important;
}

.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-3xl {
  border-radius: var(--radius-lg) !important;
}

.shadow,
.shadow-sm,
.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl,
[class*="shadow-["] {
  box-shadow: var(--shadow-sm) !important;
}

.hover\:shadow-lg:hover,
.hover\:shadow-xl:hover,
.hover\:shadow-2xl:hover {
  box-shadow: var(--shadow-md) !important;
}

.transform,
.hover\:scale-105:hover,
.hover\:transform:hover {
  transform: none !important;
}

.bg-gradient-to-br,
.bg-gradient-to-r,
.bg-gradient-to-l,
.bg-gradient-to-t,
.bg-gradient-to-b {
  background-image: none !important;
}

.bg-clip-text.text-transparent,
.text-transparent {
  background: none !important;
  color: var(--primary) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Global page rhythm. */
#main-content > section,
.product-unified,
.surveys-page,
.nps-suite,
.heatmaps-page,
.funnel-page,
.srx-page,
.targetgroups-page,
.usability-page {
  background: var(--background) !important;
  color: var(--foreground) !important;
}

#main-content > section {
  padding-top: clamp(4.5rem, 8vw, 7rem) !important;
  padding-bottom: clamp(4.5rem, 8vw, 7rem) !important;
}

#main-content > section:nth-of-type(even),
.section-alt,
.section-theme-signal,
.section-theme-spectrum,
.section-theme-lab,
.section-theme-guard,
.section-theme-grid,
.stats-section,
.tg-section:nth-of-type(even),
.srx-section:nth-of-type(even) {
  background: var(--muted) !important;
}

#main-content > section:first-child,
#hero-section,
.hero,
.product-hero,
.targetgroups-hero,
.srx-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 12%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 34rem),
    radial-gradient(circle at 88% 14%, color-mix(in oklch, var(--chart-2) 7%, transparent), transparent 32rem),
    var(--background) !important;
}

#main-content > section:first-child::before,
#hero-section::before,
.hero::before,
.product-hero::before {
  content: none !important;
}

.max-w-7xl,
.section-inner,
.section-content,
.survey-shell,
.nps-shell,
.srx-shell,
.tg-shell,
.hero-inner,
.hero-content {
  max-width: 80rem !important;
}

.hero-title,
.section-title,
.cta-title,
#main-content h1,
#main-content h2 {
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
  letter-spacing: var(--tracking-tight) !important;
  text-shadow: none !important;
}

.hero-title,
#main-content h1 {
  font-size: clamp(2.35rem, 5vw, 4.8rem) !important;
  line-height: 1.02 !important;
}

.section-title,
#main-content h2 {
  font-size: clamp(1.65rem, 3vw, 2.7rem) !important;
  line-height: 1.16 !important;
}

#main-content h3,
.card-title,
.insight-title,
.feature-title {
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
  letter-spacing: var(--tracking-tight) !important;
}

.hero-body,
.hero-text,
.hero-lead,
.hero-description,
.section-copy,
.section-description,
.cta-body,
#main-content p {
  color: var(--fg-2) !important;
  text-shadow: none !important;
}

.hero-eyebrow,
.section-eyebrow,
.cta-eyebrow,
.eyebrow,
.font-label,
.label-caps,
[class*="eyebrow"] {
  color: var(--muted-foreground) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
}

/* Unified card shell across old page-specific component names. */
:where(
  article,
  .ux-card,
  .feature-card,
  .futuristic-card,
  .metric-card,
  .preview-card,
  .distribution-card,
  .score-card,
  .value-card,
  .method-card,
  .analytics-card,
  .hud-card,
  .progress-card,
  .control-panel-card,
  .trust-card,
  .usecase-card,
  .impact-card,
  .compliance-card,
  .cta-card,
  .placeholder-card,
  .srx-card,
  .srx-tech-card,
  .hero-visual-card,
  .hero-metric,
  .story-step,
  .stat-card,
  .problem-card,
  .comparison-card,
  .step-card,
  .qtype-card,
  .delivery-card,
  .instrument-card,
  .analytics-stat,
  .feature-list-card,
  .dashboard-score-card,
  .insight-item,
  .stream-item,
  .tech-pillar,
  .tg-progress-card,
  .tg-timeline-step,
  .pricing-card,
  .faq-item
) {
  background: var(--card) !important;
  border: 1px solid color-mix(in oklch, var(--border) 70%, transparent) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--foreground) !important;
}

:where(
  article,
  .feature-card,
  .futuristic-card,
  .metric-card,
  .value-card,
  .method-card,
  .analytics-card,
  .hud-card,
  .progress-card,
  .control-panel-card,
  .trust-card,
  .usecase-card,
  .srx-card,
  .srx-tech-card,
  .stat-card,
  .problem-card,
  .comparison-card,
  .step-card,
  .qtype-card,
  .delivery-card,
  .instrument-card,
  .tg-timeline-step
):hover {
  border-color: color-mix(in oklch, var(--primary) 32%, var(--border)) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Buttons and links. */
:where(.btn, .ux-btn, .hero-glass, .glass-button, .btn-glow, .cta-button, .tg-btn, .tg-btn-soft, .srx-btn, .pricing-button, .category-btn, .faq-question),
#main-content a[class*="bg-primary"],
#main-content button[class*="bg-primary"] {
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out) !important;
}

:where(.btn-primary, .btn-cta-primary, .hero-cta-primary, .cta-button.primary, .tg-btn, .srx-btn, .pricing-button-primary),
#main-content a[class*="bg-primary"],
#main-content button[class*="bg-primary"] {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
  box-shadow: var(--shadow-sm) !important;
}

:where(.btn-primary, .btn-cta-primary, .hero-cta-primary, .cta-button.primary, .tg-btn, .srx-btn, .pricing-button-primary):hover,
#main-content a[class*="bg-primary"]:hover,
#main-content button[class*="bg-primary"]:hover {
  background: color-mix(in oklch, var(--primary) 88%, black) !important;
  border-color: color-mix(in oklch, var(--primary) 88%, black) !important;
  box-shadow: var(--shadow-md) !important;
}

:where(.btn-ghost, .btn-cta-ghost, .cta-button.secondary, .tg-btn-soft, .glass-button),
#main-content a[class*="border-2"],
#main-content button[class*="border-2"] {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--foreground) !important;
  box-shadow: none !important;
}

:where(.btn-ghost, .btn-cta-ghost, .cta-button.secondary, .tg-btn-soft, .glass-button):hover,
#main-content a[class*="border-2"]:hover,
#main-content button[class*="border-2"]:hover {
  background: var(--accent) !important;
  border-color: color-mix(in oklch, var(--primary) 40%, var(--border)) !important;
  color: var(--foreground) !important;
}

.category-btn.active,
.control-button[aria-pressed="true"],
.control-button.is-active,
.tg-tab.is-active,
.widget-rating-btn.active,
.nps-demo-btn.active,
.csat-demo-score.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

input,
select,
textarea {
  background: var(--card) !important;
  border: 1px solid var(--input) !important;
  border-radius: var(--radius-md) !important;
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
  box-shadow: var(--shadow-sm) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: color-mix(in oklch, var(--primary) 50%, var(--border)) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
  outline: none !important;
}

table {
  width: 100%;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-collapse: separate;
  border-radius: var(--radius-lg) !important;
  border-spacing: 0;
  overflow: hidden;
}

th,
td {
  border-bottom: 1px solid var(--border) !important;
  color: var(--foreground) !important;
  padding: 0.75rem 1rem;
}

thead th {
  background: var(--muted) !important;
  color: var(--muted-foreground) !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
}

tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* Decorative exceptions kept, but recolored and constrained to the DS. */
.hero-blob,
.cta-blob,
.orb,
.srx-orbit__particle,
.orbit-node,
.hero-orbits::before,
.hero-orbits::after {
  background: radial-gradient(circle, color-mix(in oklch, var(--primary) 16%, transparent), transparent 68%) !important;
  filter: none !important;
  opacity: 0.5 !important;
}

.orbit-ring,
.srx-orbit {
  border-color: color-mix(in oklch, var(--border) 70%, transparent) !important;
  filter: none !important;
}

.glass-button,
.hero-glass,
.glass,
[class*="backdrop-blur"] {
  backdrop-filter: blur(8px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(130%) !important;
}

.hero-media,
.hero-video {
  border-radius: var(--radius-lg) !important;
}

/* Header and footer. */
:root {
  /* Single source for the header's horizontal inset — used by the topbar
     row, the nav row, and the absolutely-positioned mobile controls so
     left/right breathing room stays symmetric and in sync. */
  --nav-inset: 1.25rem;
}

.site-topbar__inner,
.site-nav__shell,
.site-footer__inner {
  width: min(100% - 2rem, 80rem);
  margin-inline: auto;
}

#top-bar,
.site-topbar {
  background: var(--muted) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--muted-foreground) !important;
}

.site-topbar {
  font-size: var(--text-sm);
}

.site-topbar__inner {
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* Match .site-nav__row inset so the header block stays aligned with itself. */
  padding-inline: var(--nav-inset);
}

.site-topbar p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--muted-foreground) !important;
}

.site-status-dot {
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid color-mix(in oklch, var(--success) 65%, var(--border));
  border-radius: var(--radius-pill);
  background: var(--success);
  flex: none;
}

.site-topbar__link {
  color: var(--primary) !important;
  font-weight: 500;
  white-space: nowrap;
}

#navbar,
.site-nav {
  background: color-mix(in oklch, var(--background) 90%, transparent) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  color: var(--foreground) !important;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
}

#mobileNavToggle {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}

.site-nav__row {
  position: relative;
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* Constant inline padding in BOTH states: gives the sticky card
     breathing room without shifting content horizontally on scroll. */
  padding-inline: var(--nav-inset);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  min-width: 8.75rem;
}

.site-brand__logo {
  width: auto;
  height: 2rem;
  display: block;
}

.site-brand__logo--light {
  display: none;
}

.dark .site-brand__logo--dark {
  display: none;
}

.dark .site-brand__logo--light {
  display: block;
}

.site-nav__links,
.site-nav__actions {
  display: flex;
  align-items: center;
}

.site-nav__links {
  gap: 0.25rem;
}

.site-nav__actions {
  gap: 0.5rem;
}

.site-nav__parent,
.site-language {
  position: relative;
}

.site-nav__parent::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -0.5rem;
  right: -0.5rem;
  height: 0.85rem;
  z-index: 59;
}

.site-nav__trigger {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.site-nav__chevron {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform var(--duration-fast) var(--ease-out);
}

.site-nav__badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.1rem;
  padding: 0.12rem 0.4rem;
  border: 1px solid color-mix(in oklch, var(--primary) 25%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--primary) 8%, var(--card));
  color: var(--primary);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.site-submenu {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 60;
  width: 17rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.45rem;
  transform-origin: top left;
  transition:
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.site-language__menu {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 70;
  min-width: 10rem;
  padding: 0.4rem;
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.site-language__menu a {
  display: block;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-md);
  color: var(--fg-2) !important;
  font-size: var(--text-sm);
}

.site-language__menu a:hover {
  background: var(--accent);
  color: var(--primary) !important;
}

.site-nav__utility {
  color: var(--muted-foreground) !important;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-md);
}

.site-nav__cta,
.site-mobile-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid color-mix(in oklch, var(--primary) 85%, var(--border));
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--primary-foreground) !important;
  font-weight: 650;
  font-size: var(--text-sm);
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.site-nav__cta:hover,
.site-mobile-cta:hover {
  background: color-mix(in oklch, var(--primary) 88%, black);
  border-color: color-mix(in oklch, var(--primary) 80%, black);
  color: var(--primary-foreground) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.site-mobile-cta {
  width: 100%;
  margin-top: 0.35rem;
  min-height: 2.75rem;
}

/* Mobile-only: secondary Login button shown above the primary CTA.
   Lives inside #mobileMenu, which is itself hidden until the menu
   opens, so no extra gating is needed. */
.site-mobile-login {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  margin-top: 0.35rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--foreground) !important;
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.site-mobile-login:hover {
  background: var(--accent);
  border-color: color-mix(in oklch, var(--primary) 35%, var(--border));
  color: var(--primary) !important;
}

/* Mobile-only: segmented language switcher inside the open menu. */
.site-mobile-lang {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}

.site-mobile-lang__opt {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--fg-2) !important;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.site-mobile-lang__opt:hover {
  background: var(--accent);
  color: var(--primary) !important;
}

.site-mobile-lang__opt[aria-current="true"] {
  border-color: color-mix(in oklch, var(--primary) 55%, var(--border));
  background: color-mix(in oklch, var(--primary) 8%, var(--card));
  color: var(--primary) !important;
}

.site-nav__utility:hover {
  background: var(--accent);
  color: var(--primary) !important;
}

.site-icon-button,
.site-mobile-toggle {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.site-language__button {
  width: auto;
  padding-inline: 0.65rem;
  font-size: var(--text-sm);
  font-weight: 500;
}

.site-icon-button:hover,
.site-mobile-toggle:hover {
  background: var(--accent);
  border-color: color-mix(in oklch, var(--primary) 35%, var(--border));
  color: var(--primary);
}

.site-icon-button__icon {
  width: 1.1rem;
  height: 1.1rem;
}

.site-mobile-controls,
.site-mobile-menu {
  display: none;
}

.site-mobile-controls {
  align-items: center;
  gap: 0.5rem;
}

#closeIcon {
  display: none;
}

#mobileNavToggle:checked ~ .site-nav__shell #menuIcon {
  display: none;
}

#mobileNavToggle:checked ~ .site-nav__shell #closeIcon {
  display: block;
}

.site-mobile-menu {
  padding: 0.75rem;
  margin-bottom: 1rem;
}

.site-mobile-menu details {
  margin: 0;
}

.site-mobile-menu summary {
  list-style: none;
  cursor: pointer;
}

.site-mobile-menu summary::-webkit-details-marker {
  display: none;
}

.site-mobile-menu__group {
  display: grid;
  gap: 0.2rem;
  padding: 0.2rem 0 0.45rem 0.75rem;
}

.nav-item,
.nav-subitem,
.mobile-nav-item,
.mobile-nav-subitem {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.7rem;
}

.nav-subitem,
.mobile-nav-item,
.mobile-nav-subitem {
  display: flex;
  width: 100%;
}

/* Sticky-navbar morph: single authoritative definition.
   Base state already declares every animated property with a neutral/
   transparent value so each one interpolates cleanly and in sync
   (box-shadow must NOT start from `none` or it pops instead of fading). */
.nav-transition {
  transition:
    background-color var(--duration-slow) var(--ease-out),
    border-color var(--duration-slow) var(--ease-out) !important;
}

#navbar-flex-container {
  border: 1px solid transparent !important;
  border-radius: var(--radius-lg) !important;
  background-color: transparent !important;
  box-shadow: 0 0 0 0 oklch(0% 0 0 / 0) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transform: translateY(0);
  will-change: transform;
  transition:
    background-color var(--duration-slow) var(--ease-out),
    border-color var(--duration-slow) var(--ease-out),
    box-shadow var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out) !important;
}

#navbar.scrolled #navbar-flex-container {
  background-color: var(--card) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(8px);
}

@media (prefers-reduced-motion: reduce) {
  .nav-transition,
  #navbar-flex-container {
    transition: none !important;
  }
}

.nav-item,
.nav-subitem,
.mobile-nav-item,
.mobile-nav-subitem {
  color: var(--fg-2) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 500 !important;
}

.nav-item:hover,
.nav-subitem:hover,
.mobile-nav-item:hover,
.mobile-nav-subitem:hover,
.nav-item.active,
.nav-subitem.active,
.mobile-nav-item.active,
.mobile-nav-subitem.active,
.nav-parent-active > [data-nav-toggle] {
  background: var(--accent) !important;
  color: var(--primary) !important;
}

.nav-subitem--disabled,
.mobile-nav-subitem--disabled {
  justify-content: space-between;
  color: var(--muted-foreground) !important;
  cursor: not-allowed;
  opacity: 0.7;
}

.nav-subitem--disabled:hover,
.mobile-nav-subitem--disabled:hover {
  background: transparent !important;
  color: var(--muted-foreground) !important;
}

.nav-item::after,
.mobile-nav-item::before {
  display: none !important;
}

[data-nav-submenu],
#mobileMenu,
.site-menu {
  background: var(--popover) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

@media (max-width: 1180px) {
  .site-nav__links,
  .site-nav__actions {
    display: none !important;
  }

  .site-mobile-controls {
    display: flex !important;
    position: absolute;
    top: 50%;
    /* Absolute positioning is relative to .site-nav__row's padding box,
       so it would ignore the row's inline padding — re-apply the inset
       explicitly to keep symmetry with the (flex-flowed) logo. */
    right: var(--nav-inset);
    transform: translateY(-50%);
    z-index: 2;
  }

  #mobileNavToggle:checked ~ .site-nav__shell .site-mobile-menu {
    display: grid;
    gap: 0.25rem;
  }

  .site-topbar__inner {
    justify-content: center;
    overflow: hidden;
  }

  .site-topbar__link {
    display: none;
  }

  .site-topbar p {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  .site-brand {
    min-width: 7rem;
  }

  .site-brand__logo {
    height: 1.65rem;
  }
}

footer,
.site-footer {
  background: var(--muted) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--foreground) !important;
}

.site-footer__inner {
  padding: clamp(3.5rem, 7vw, 5rem) 0 2rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.site-footer__brand {
  display: grid;
  align-content: start;
  gap: 1rem;
  max-width: 22rem;
}

.site-footer__logo {
  width: auto;
  height: 2rem;
}

.site-footer__nav {
  display: grid;
  align-content: start;
  gap: 0.55rem;
}

.site-footer__nav .site-footer__nav-title {
  margin: 0 0 0.35rem;
}

.site-footer__nav a {
  width: fit-content;
  padding: 0.1rem 0;
  font-size: var(--text-sm);
}

.site-footer__soon {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  padding: 0.1rem 0;
  /* WCAG AA: opacity entfernt (drückte Kontrast auf ~2.3:1); konsistent
     mit den übrigen Footer-Links (var(--muted-foreground)). */
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

.site-footer__soon span {
  padding: 0.08rem 0.35rem;
  border: 1px solid color-mix(in oklch, var(--primary) 25%, var(--border));
  border-radius: var(--radius-sm);
  /* Badge: dezenter Primary-Tint + foreground-Text → genug Kontrast
     auch für die kleine, fette Versalschrift (WCAG AA). */
  background: color-mix(in oklch, var(--primary) 12%, var(--muted));
  color: var(--foreground);
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.site-footer__bottom p {
  margin: 0;
  font-size: var(--text-sm);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.8rem 1.25rem;
  font-size: var(--text-sm);
}

footer h3,
.site-footer h3,
.site-footer .site-footer__nav-title {
  color: var(--foreground) !important;
  font-size: var(--text-sm) !important;
  font-weight: 700 !important;
}

/* GEO-Definitions-Akkordeon (SEO Phase 4b) — natives <details>, eingeklappt,
   token-basiert, sitewide konsistent. */
.geo-defs {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 56rem;
  margin: 2.5rem auto 0;
}
.geo-def {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card, var(--background));
  overflow: hidden;
  transition: border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.geo-def[open] {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.geo-def > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.25rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--foreground);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  line-height: 1.4;
}
.geo-def > summary::-webkit-details-marker { display: none; }
.geo-def > summary::after {
  content: "+";
  flex: none;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--muted-foreground);
  transition: transform 220ms var(--ease-out), color 220ms var(--ease-out);
}
.geo-def[open] > summary::after {
  transform: rotate(45deg);
  color: var(--primary);
}
.geo-def__a {
  padding: 0 1.25rem 1.25rem;
  color: var(--fg-2);
  line-height: 1.65;
  font-size: 0.95rem;
}
.geo-def__a p { margin: 0; }

footer p,
footer a,
.site-footer p,
.site-footer a {
  color: var(--muted-foreground) !important;
}

footer a:hover,
.site-footer a:hover {
  color: var(--primary) !important;
}

@media (max-width: 900px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  .site-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-footer__legal {
    justify-content: flex-start;
  }
}

/* Pricing/FAQ/dynamic content. */
.pricing-modal,
.faq-question,
.faq-answer,
#faqContainer > div,
.job-card {
  background: var(--card) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}

.faq-question {
  color: var(--foreground) !important;
}

.price,
.pricing-price,
.stat-value,
.metric-value,
.dashboard-score-value,
.analytics-stat-value,
.tg-metric-value,
.srx-stat-value {
  color: var(--foreground) !important;
  font-family: var(--font-mono) !important;
  font-feature-settings: "tnum" 1, "ss01" 1 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: var(--tracking-tight) !important;
}

/* Product demos should read like calm app surfaces. */
.app-window,
.widget-card,
.browser-frame,
.dashboard-preview,
.result-panel,
.control-preview,
.persona-preview,
.survey-widget,
.nps-demo,
.csat-demo,
.ueq-demo {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}

.app-bg-card,
.mini-link-card,
.mini-modal,
.mini-modal-opt,
.widget-rating-btn,
.nps-demo-btn,
.ueq-scale-item,
.tag,
.chip,
.badge,
[class*="badge"],
[class*="pill"] {
  border-radius: var(--radius-md) !important;
}

.widget-rating-btn,
.nps-demo-btn {
  background: var(--background) !important;
  border: 1px solid var(--border) !important;
  color: var(--foreground) !important;
  font-family: var(--font-mono) !important;
  font-size: var(--text-sm) !important;
  filter: none !important;
  transform: none !important;
}

#billingToggle.pricing-toggle {
  display: inline-flex;
  align-items: center;
  width: 2.75rem;
  height: 1.5rem;
  padding: 0.1875rem;
  border: 1px solid color-mix(in oklch, var(--primary) 72%, var(--border));
  border-radius: var(--radius-pill);
  background: var(--primary);
  cursor: pointer;
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.08), var(--shadow-xs);
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

#billingToggle.pricing-toggle[aria-pressed="false"] {
  background: var(--muted);
  border-color: var(--border);
}

#billingToggle.pricing-toggle:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--primary) 45%, transparent);
  outline-offset: 3px;
}

#toggleHandle.pricing-toggle__handle {
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--background);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.18);
  transform: translateX(1.25rem) !important;
  transition: transform var(--duration-fast) var(--ease-out);
}

#billingToggle.pricing-toggle[aria-pressed="false"] #toggleHandle.pricing-toggle__handle {
  transform: translateX(0) !important;
}

.pricing-cta {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  width: 100% !important;
  max-width: 14rem !important;
  min-height: 2.75rem !important;
  padding: 0.65rem 0.85rem !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--background) !important;
  color: var(--primary) !important;
  font-weight: 650 !important;
  text-decoration: none !important;
  box-shadow: var(--shadow-sm) !important;
  transform: none !important;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out) !important;
}

.pricing-cta::before {
  display: none !important;
}

.pricing-cta:is(:hover, :focus-visible) {
  border-color: color-mix(in oklch, var(--primary) 45%, var(--border)) !important;
  background: var(--primary-12) !important;
  color: var(--primary) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
}

.pricing-cta--featured {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

.pricing-cta--featured:is(:hover, :focus-visible) {
  border-color: color-mix(in oklch, var(--primary) 82%, black) !important;
  background: color-mix(in oklch, var(--primary) 88%, black) !important;
  color: var(--primary-foreground) !important;
}

.pricing-cta--disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  transform: none !important;
}

.pricing-cta__label {
  position: static !important;
  z-index: auto !important;
  font-size: var(--text-sm) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.pricing-cta__icon {
  position: static !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  flex: 0 0 auto !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  box-shadow: none !important;
  transform: none !important;
}

.pricing-cta--featured .pricing-cta__icon {
  background: color-mix(in oklch, var(--primary-foreground) 18%, transparent) !important;
  color: var(--primary-foreground) !important;
}

.pricing-cta:is(:hover, :focus-visible) .pricing-cta__icon,
.pricing-cta:is(:hover, :focus-visible) .pricing-cta__icon svg {
  transform: none !important;
}

.csat-demo-score {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.55rem !important;
  height: 2.55rem !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-md) !important;
  background: transparent !important;
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
  font-size: 1.75rem !important;
  line-height: 1 !important;
  filter: grayscale(1) opacity(0.58) !important;
  transform: none !important;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    filter var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.csat-demo-score:hover,
.csat-demo-score.active {
  background: var(--primary-12) !important;
  border-color: color-mix(in oklch, var(--primary) 25%, var(--border)) !important;
  color: var(--foreground) !important;
  filter: none !important;
}

.csat-demo-score.active {
  transform: scale(1.08) !important;
}

.home-final-cta {
  padding: clamp(4rem, 8vw, 6.5rem) 1rem !important;
  background: var(--muted) !important;
}

.home-final-cta__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem);
  text-align: center;
}

.home-final-cta__content {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
}

.home-final-cta__eyebrow {
  margin: 0;
  color: var(--primary);
  font-size: var(--text-sm);
  font-weight: 650;
}

.home-final-cta__title {
  max-width: 46rem;
  margin: 0;
  color: var(--foreground);
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.03;
  letter-spacing: 0;
  font-weight: 720;
}

.home-final-cta__body {
  max-width: 48rem;
  margin: 0;
  color: var(--muted-foreground);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.55;
}

.home-final-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.85rem 1.35rem;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--primary-foreground) !important;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.home-final-cta__button:hover {
  background: color-mix(in oklch, var(--primary) 88%, black);
  border-color: color-mix(in oklch, var(--primary) 82%, black);
  color: var(--primary-foreground) !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.home-final-cta__meta {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

/* Keep icons and check markers calm. */
.feature-bullet-check,
.site-check-dot,
.check-icon,
.icon-dot,
.step-number {
  background: var(--primary-12) !important;
  color: var(--primary) !important;
  border-color: color-mix(in oklch, var(--primary) 35%, var(--border)) !important;
}

.feature-bullet-check,
.site-check-dot {
  width: 0.6rem !important;
  height: 0.6rem !important;
  display: inline-block !important;
  flex: none !important;
  border: 1px solid color-mix(in oklch, var(--primary) 35%, var(--border)) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--primary) !important;
  color: transparent !important;
  font-size: 0 !important;
}

.cta-meta span,
.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* CTA bands become editorial panels instead of saturated gradient blocks. */
.cta-section,
.cta,
.targetgroups-cta,
.cta-panel,
section[class*="from-primary-600"],
section[class*="to-amber-600"] {
  background:
    radial-gradient(circle at 20% 0%, color-mix(in oklch, var(--primary) 9%, transparent), transparent 32rem),
    var(--muted) !important;
  color: var(--foreground) !important;
}

.cta-section h2,
.cta h2,
.targetgroups-cta h2,
.cta-panel h2,
section[class*="from-primary-600"] h2 {
  color: var(--foreground) !important;
}

.cta-section p,
.cta p,
.targetgroups-cta p,
.cta-panel p,
section[class*="from-primary-600"] p {
  color: var(--fg-2) !important;
}

/* Legal and long-form pages. */
#main-content .prose,
#main-content .legal-content {
  color: var(--fg-2) !important;
}

#main-content ol,
#main-content ul {
  color: var(--fg-2) !important;
}

#main-content strong {
  color: var(--foreground) !important;
  font-weight: 600;
}

@media (max-width: 767px) {
  #main-content > section {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  .hero-title,
  #main-content h1 {
    font-size: clamp(2.25rem, 13vw, 3.4rem) !important;
  }
}

/* ============================================================
   Final CTA card (Phase 4c) — shared, token-driven component.
   New class namespace (.final-cta*) so the sitewide CTA-unify
   overrides (.cta-section/.cta/.cta-panel) never flatten it.
   Uses global design-system tokens → consistent in light+dark
   on every product page (.surveys-page/.nps-suite/.targetgroups-page).
   ============================================================ */
.final-cta {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  background: transparent;
}

.final-cta-card {
  width: min(80rem, 100% - 3rem);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.82fr);
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.final-cta-main {
  padding: clamp(2.25rem, 4.5vw, 3.5rem);
  background:
    radial-gradient(circle at 0% 0%, color-mix(in oklch, var(--primary) 11%, transparent), transparent 44%);
}

.final-cta-rail {
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 3.5vw, 2.75rem);
  border-left: 1px solid var(--border);
  background: color-mix(in oklch, var(--muted) 62%, var(--card));
}

/* Eyebrow: bracket mark + mono label */
.final-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.final-cta-eyebrow .fc-mark {
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in oklch, var(--primary) 45%, var(--border));
  border-radius: 6px;
  color: var(--primary);
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 0.82rem;
  line-height: 1;
}

.final-cta-eyebrow .fc-label {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.final-cta-title {
  margin-top: 1.35rem;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--foreground);
  text-wrap: balance;
}

.final-cta-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--primary);
}

.final-cta-body {
  margin-top: 1.1rem;
  max-width: 34rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--fg-2, var(--muted-foreground));
}

.final-cta-divider {
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 1.25rem;
  border: 0;
  border-top: 1px solid var(--border);
}

.final-cta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.final-cta-tags span {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  white-space: nowrap;
}

/* Rail */
.final-cta-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.final-cta-primary,
.final-cta-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.95rem 1.25rem;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.18s var(--ease-out, ease),
    box-shadow 0.18s var(--ease-out, ease),
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.final-cta-primary {
  justify-content: space-between;
  /* override per-page `.<page> a { color: inherit }` so the label
     stays legible on the orange fill */
  color: #fff !important;
  background: var(--primary);
  box-shadow: 0 12px 30px color-mix(in oklch, var(--primary) 24%, transparent);
}

.final-cta-primary:hover,
.final-cta-primary:focus-visible {
  transform: translateY(-2px);
  background: color-mix(in oklch, var(--primary) 88%, black);
  box-shadow: 0 16px 36px color-mix(in oklch, var(--primary) 30%, transparent);
}

.final-cta-ghost {
  margin-top: 0.7rem;
  color: var(--foreground) !important;
  background: var(--card);
  border-color: var(--border);
}

.final-cta-ghost:hover,
.final-cta-ghost:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in oklch, var(--primary) 32%, var(--border));
}

.final-cta-primary svg,
.fc-explore-link svg {
  flex: none;
  width: 1rem;
  height: 1rem;
}

/* "ODER ERKUNDEN" divider */
.final-cta-or {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 1.5rem 0 0.35rem;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.final-cta-or::before,
.final-cta-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.final-cta-explore {
  display: flex;
  flex-direction: column;
}

.fc-explore-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  text-decoration: none;
  color: var(--foreground);
  border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
}

.fc-explore-link:last-child {
  border-bottom: 0;
}

.fc-explore-link .fc-explore-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.fc-explore-link .fc-explore-sub {
  display: block;
  margin-top: 0.2rem;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 0.72rem;
  color: var(--muted-foreground);
}

.fc-explore-link svg {
  color: var(--muted-foreground);
  transition: transform 0.18s var(--ease-out, ease), color 0.18s ease;
}

.fc-explore-link:hover .fc-explore-title,
.fc-explore-link:focus-visible .fc-explore-title {
  color: var(--primary);
}

.fc-explore-link:hover svg,
.fc-explore-link:focus-visible svg {
  color: var(--primary);
  transform: translateX(3px);
}

.final-cta-rail-spacer {
  flex: 1;
  min-height: 0.5rem;
}

@media (max-width: 880px) {
  .final-cta-card {
    grid-template-columns: 1fr;
  }
  .final-cta-rail {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}

/* ============================================================
   Self-hosted consent management (uxspire CMP)
   ============================================================ */
#cc-main {
  --cc-font-family: var(--font-sans, Inter, system-ui, sans-serif);
  --cc-bg: var(--card);
  --cc-primary-color: var(--foreground);
  --cc-secondary-color: var(--muted-foreground);
  --cc-btn-primary-bg: var(--primary);
  --cc-btn-primary-color: #fff;
  --cc-btn-primary-border-color: var(--primary);
  --cc-btn-primary-hover-bg: color-mix(in oklch, var(--primary) 88%, black);
  --cc-btn-primary-hover-border-color: color-mix(in oklch, var(--primary) 88%, black);
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--foreground);
  --cc-btn-secondary-border-color: var(--border);
  --cc-btn-secondary-hover-bg: color-mix(in oklch, var(--muted) 70%, transparent);
  --cc-btn-secondary-hover-border-color: color-mix(in oklch, var(--primary) 35%, var(--border));
  --cc-cookie-category-block-bg: var(--card);
  --cc-cookie-category-block-border: var(--border);
  --cc-cookie-category-block-hover-bg: color-mix(in oklch, var(--muted) 55%, transparent);
  --cc-toggle-on-bg: var(--primary);
  --cc-toggle-off-bg: color-mix(in oklch, var(--muted-foreground) 38%, transparent);
  --cc-modal-border-radius: 0.85rem;
  --cc-btn-border-radius: var(--radius-sm, 0.25rem);
  color-scheme: light dark;
}

/* Brand logo (uxspire face) used in banner + modal header.
   Swaps automatically between light + dark variants.
   All custom CMP rules scope #cc-main to beat vendor `all: unset`. */
#cc-main .uxs-cmp__media {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
#cc-main .uxs-cmp__logo {
  display: inline-block;
  width: 85px;
  height: 62px;
  flex: 0 0 auto;
  background: url('/img/uxspire-icon-face.svg') center/contain no-repeat;
}
.dark #cc-main .uxs-cmp__logo {
  background-image: url('/img/uxspire-icon-face-dark.svg');
}
#cc-main .uxs-cmp__logo--modal {
  width: 56px;
  height: 40px;
}
#cc-main .uxs-cmp__accent {
  color: var(--primary);
  display: inline;
  font: inherit;
  font-weight: inherit;
}
#cc-main .uxs-cmp__soft {
  color: var(--muted-foreground);
  display: block;
  font: inherit;
  font-weight: 500;
}

/* ---------- Consent banner (bottom-center, narrow card) ---------- */
#cc-main .cm {
  border: 1px solid var(--border);
  box-shadow: 0 18px 60px color-mix(in oklch, var(--foreground) 14%, transparent);
  border-radius: 0.85rem;
  padding: 0.9rem 1.25rem;
}
#cc-main .cm--box {
  max-width: min(960px, calc(100vw - 2rem));
  width: 100%;
}
#cc-main .cm__body {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: nowrap;
  padding: 0;
}
#cc-main .cm__texts {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
}
#cc-main .cm__title {
  font-size: 0.9rem;
  line-height: 1.45;
  font-weight: 600;
  margin-bottom: 0.1rem;
  letter-spacing: 0;
  /* Override vendor's `padding-left/right: 1.1rem !important` so the title
     starts flush with the subtitle and the injected footer-links below it. */
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#cc-main .cm__desc {
  font-size: 0.9rem;
  color: var(--muted-foreground);
  line-height: 1.5;
  margin-bottom: 0;
}
#cc-main .cm__desc:empty {
  display: none;
}
#cc-main .cm__btns {
  flex: 0 0 auto;
  display: flex !important;
  flex-direction: row !important;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0;
  padding: 0 !important;
  border-top: 0 !important;
}
#cc-main .cm__btn-group {
  display: flex !important;
  flex-direction: row !important;
  gap: 0.5rem;
  margin: 0 !important;
}
#cc-main .cm__btn {
  min-height: 2.5rem;
  padding: 0 1rem;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  border-radius: var(--radius-sm, 0.25rem) !important;
}
#cc-main .cm__btn[data-role="show"] {
  background: transparent;
  border-color: transparent;
  color: var(--muted-foreground);
}
#cc-main .cm__btn[data-role="show"]:hover {
  color: var(--foreground);
  background: transparent;
}
#cc-main .cm__btn[data-role="show"]::after {
  content: '';
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-left: 0.4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  vertical-align: middle;
}
#cc-main .cm__footer {
  background: transparent !important;
  border-top: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
#cc-main .cm__links {
  padding: 0.4rem 0 0 !important;
  margin: 0 auto !important;
  max-width: none !important;
  width: 100%;
  display: flex;
  gap: 1rem;
  justify-content: center;
  font-size: 0.78rem;
}
/* Footer links injected as 3rd line in the texts column (under subtitle).
   Vendor applies `padding-left/right: 1.1rem !important` on .cm__links which
   knocks the text out of alignment with the title above — override explicitly. */
#cc-main .cm__texts .uxs-cmp__cm-links {
  display: flex;
  gap: 1.25rem;
  margin: 0.4rem 0 0 0 !important;
  padding: 0 !important;
  font-size: 0.8rem;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: none !important;
}
#cc-main .cm__texts .uxs-cmp__cm-links a {
  color: var(--muted-foreground);
  text-decoration: none;
  display: inline;
  font-weight: 500;
}
#cc-main .cm__texts .uxs-cmp__cm-links a:hover {
  color: var(--primary);
}
#cc-main .cm__footer a,
#cc-main .cm__links a {
  color: var(--muted-foreground);
  text-decoration: none;
  display: inline;
}
#cc-main .cm__footer a:hover,
#cc-main .cm__links a:hover {
  color: var(--primary);
  text-decoration: underline;
}

@media (max-width: 720px) {
  #cc-main .cm__body { gap: 0.85rem; }
  #cc-main .cm__btns {
    width: 100%;
    flex-wrap: wrap;
  }
  #cc-main .cm__btn { flex: 1 1 auto; }
}

/* ---------- Preferences modal ---------- */
#cc-main .pm {
  border: 1px solid var(--border);
  box-shadow: 0 22px 70px color-mix(in oklch, var(--foreground) 18%, transparent);
  border-radius: 1.1rem;
  overflow: hidden;
}
#cc-main .pm--box {
  max-width: min(56em, calc(100vw - 2rem));
  height: auto !important;
  max-height: min(85vh, 48em);
}
/* Allow body to shrink-to-fit when content is small, scroll when large */
#cc-main .pm__body {
  overflow-y: auto;
}
#cc-main .pm__header {
  display: flex !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 0.4rem 1rem;
  padding: 1.5rem 1.75rem 0.75rem !important;
  border-bottom: 0 !important;
}
#cc-main .pm__header .uxs-cmp__logo {
  margin-top: 0.1rem;
  order: 1;
}
#cc-main .pm__title {
  font-size: 1.35rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em;
  flex: 1 1 auto !important;
  margin-right: 0 !important;
  order: 2;
}
#cc-main .pm__close-btn {
  order: 3;
  flex: 0 0 auto;
}
#cc-main .uxs-cmp__subtitle {
  flex: 1 1 100%;
  width: 100%;
  margin: 0 0 0 calc(56px + 1rem); /* aligns under title past logo */
  color: var(--muted-foreground);
  font-size: 0.95rem;
  line-height: 1.5;
  order: 4;
}
#cc-main .pm__close-btn {
  flex: 0 0 auto;
}

#cc-main .pm__body {
  padding: 1rem 1.75rem 1.25rem;
}

/* Category cards: borderless, subtle separation via spacing */
#cc-main .pm__section,
#cc-main .pm__section--toggle {
  background: var(--card);
  border: 0;
  border-radius: 0.85rem;
  padding: 0.85rem 1.1rem;
  margin-bottom: 0.6rem;
  display: block;
}
#cc-main .pm__section-title-wrapper,
#cc-main .pm__section-title-container {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

/* Category icon (orange/peach/purple tinted circle) */
#cc-main .uxs-cmp__cat-icon {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklch, var(--primary) 14%, var(--card));
  color: var(--primary);
}
#cc-main .uxs-cmp__cat-icon svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}
#cc-main .pm__section,
#cc-main .pm__section--toggle[data-uxs-category="necessary"] .uxs-cmp__cat-icon {
  background: color-mix(in oklch, var(--primary) 18%, var(--card));
  color: var(--primary);
}
#cc-main .pm__section,
#cc-main .pm__section--toggle[data-uxs-category="analytics"] .uxs-cmp__cat-icon {
  background: color-mix(in oklch, #f5a26b 28%, var(--card));
  color: color-mix(in oklch, #c05e1f 90%, var(--foreground));
}
#cc-main .pm__section,
#cc-main .pm__section--toggle[data-uxs-category="marketing"] .uxs-cmp__cat-icon {
  background: color-mix(in oklch, #b59cf4 30%, var(--card));
  color: color-mix(in oklch, #6c5ce7 88%, var(--foreground));
}

#cc-main .pm__section-title {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  /* Strip vendor's button styling — chrome (border, bg, min-height, big right-padding) */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  position: static !important;
  width: auto !important;
  justify-content: flex-start !important;
  cursor: pointer;
}
#cc-main .pm__section-title:hover {
  background: transparent !important;
  border-color: transparent !important;
}
#cc-main .pm__section-desc {
  margin-top: 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  line-height: 1.5;
}
#cc-main .pm__section,
#cc-main .pm__section--toggle a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#cc-main .pm__section,
#cc-main .pm__section--toggle a:hover {
  text-decoration: none;
}

/* Hide vendor's service counter ("2 Dienste") in favour of our own badge */
#cc-main .pm__badge.pm__service-counter {
  display: none;
}

/* "Immer aktiv" badge */
#cc-main .uxs-cmp__badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: color-mix(in oklch, var(--muted) 80%, transparent);
  color: var(--muted-foreground);
  border-radius: 999px;
  vertical-align: middle;
  line-height: 1.4;
}

/* Order in the title row: icon, title, [spacer], toggle, chevron — chevron pinned to far right */
#cc-main .uxs-cmp__cat-icon { order: 0; }
#cc-main .pm__section-title { order: 1; flex: 1 1 auto; text-align: left; }
#cc-main .pm__section-title-wrapper > .section__toggle-wrapper {
  order: 2;
  margin-left: auto;
  flex: 0 0 auto;
  position: static !important;
  right: unset !important;
  left: unset !important;
  transform: none !important;
  width: 50px;
  height: 23px;
}
/* Hide the bare checkbox input and the textual label inside the section toggle —
   only the visual .toggle__icon stays. The wrapping <label> still triggers it. */
#cc-main .pm__section-title-wrapper > .section__toggle-wrapper > input.section__toggle,
#cc-main .pm__section-title-wrapper > .section__toggle-wrapper > .toggle__label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none;
  opacity: 0;
}
#cc-main .pm__section-arrow {
  order: 3;
  flex: 0 0 auto;
  margin-left: 0.85rem;
  position: static !important;
  left: unset !important;
  right: unset !important;
  width: 20px;
  height: 20px;
}

/* Single-column desc layout for sections without a services list (Analyse, Marketing) */
#cc-main .pm__section--toggle[data-uxs-category="analytics"].is-expanded .pm__section-desc-wrapper,
#cc-main .pm__section--toggle[data-uxs-category="marketing"].is-expanded .pm__section-desc-wrapper {
  flex-direction: column;
}
#cc-main .pm__section--toggle[data-uxs-category="analytics"] .pm__section-desc-wrapper .pm__section-desc,
#cc-main .pm__section--toggle[data-uxs-category="marketing"] .pm__section-desc-wrapper .pm__section-desc {
  flex: 1 1 100%;
}

/* Expandable detail: bullets (services) left, description right, in one card */
#cc-main .pm__section--toggle .pm__section-desc-wrapper {
  display: none;
  margin: 0.55rem 0 0 !important;
  padding: 0.85rem 1rem;
  background: var(--card);
  border-radius: 0.7rem;
  border: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
}
#cc-main .pm__section--toggle.is-expanded .pm__section-desc-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: flex-start;
}
#cc-main .pm__section-desc-wrapper > :not(:last-child) {
  border-bottom: 0 !important;
}
#cc-main .pm__section--toggle .pm__section-services {
  flex: 1 1 220px;
  min-width: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
#cc-main .pm__section--toggle .pm__section-desc-wrapper .pm__section-desc {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: block;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}
#cc-main .pm__service {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0.25rem 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
#cc-main .pm__service::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--primary);
  flex: 0 0 auto;
  display: inline-block;
}
#cc-main .pm__service-icon,
#cc-main .pm__service-header .pm__service-icon {
  display: none;
}
#cc-main .pm__service .section__toggle-wrapper,
#cc-main .pm__service .toggle-service {
  display: none;
}
#cc-main .pm__service-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
#cc-main .pm__service-title,
#cc-main .pm__service .pm__service-title {
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--foreground);
}

/* Footer: links left, buttons right */
#cc-main .pm__footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.75rem 1.25rem;
  border-top: 1px solid var(--border);
  background: color-mix(in oklch, var(--muted) 32%, var(--card));
  flex-wrap: wrap;
}
#cc-main .pm__btn-group,
#cc-main .pm__footer .btns,
#cc-main .pm__footer > div:not(.uxs-cmp__links) {
  display: flex;
  gap: 0.55rem;
  margin-left: auto;
  flex-wrap: wrap;
}
#cc-main .uxs-cmp__links {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
}
#cc-main .uxs-cmp__links a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  display: inline;
}
#cc-main .uxs-cmp__links a:hover {
  text-decoration: underline;
}
#cc-main .uxs-cmp__subtitle {
  display: block;
}

#cc-main .pm__btn {
  min-height: 2.5rem;
  padding: 0 1rem;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--radius-sm, 0.25rem) !important;
}
#cc-main .pm__close-btn {
  border-radius: var(--radius-sm, 0.25rem) !important;
}

@media (max-width: 720px) {
  #cc-main .pm__header { padding: 1.25rem 1.25rem 0.5rem; }
  #cc-main .pm__body { padding: 0.85rem 1.25rem 1rem; }
  #cc-main .pm__footer { padding: 0.85rem 1.25rem 1rem; }
  #cc-main .uxs-cmp__subtitle { margin-left: 0 !important; }
  #cc-main .pm__section-desc { margin-left: 0; }
  #cc-main .pm__section--expandable .pm__section-services,
  #cc-main .pm__section--expandable .pm__section-table { margin-left: 0; }
}

/* ============================================================
   Mobile (≤640px): full-screen modal, stacked button column,
   compact banner with logo+title horizontal, buttons stacked.
   ============================================================ */
@media (max-width: 640px) {
  /* ---------- Banner ---------- */
  #cc-main .cm--box {
    max-width: calc(100vw - 1rem);
    width: auto;
  }
  #cc-main .cm__body {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0 !important;
  }
  #cc-main .uxs-cmp__media {
    flex: 0 0 auto;
  }
  #cc-main .uxs-cmp__logo {
    width: 48px;
    height: 36px;
  }
  #cc-main .cm__texts {
    flex: 1 1 0 !important;
    min-width: 0;
  }
  #cc-main .cm__title {
    font-size: 1.05rem !important;
    line-height: 1.35;
  }
  /* On mobile only: subtitle on a new line under the headline */
  #cc-main .uxs-cmp__soft {
    display: block;
  }
  /* Buttons: wrap to full-width row, stacked column */
  #cc-main .cm__btns {
    flex: 1 1 100% !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
    align-items: stretch !important;
  }
  #cc-main .cm__btn-group {
    flex-direction: column !important;
    width: 100%;
    gap: 0.4rem !important;
  }
  #cc-main .cm__btn {
    width: 100% !important;
    flex: 1 1 auto !important;
  }
  /* "Einstellungen" as text-link style on mobile */
  #cc-main .cm__btn[data-role="show"] {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--muted-foreground) !important;
    min-height: 2.25rem !important;
  }
  #cc-main .cm__btn[data-role="show"]:hover {
    color: var(--foreground) !important;
  }

  /* ---------- Preferences modal (full-screen sheet) ---------- */
  #cc-main .pm__header {
    padding: 1.1rem 1rem 0.65rem !important;
    align-items: center !important;
    gap: 0.5rem 0.85rem !important;
  }
  #cc-main .uxs-cmp__logo--modal {
    width: 42px;
    height: 32px;
  }
  #cc-main .pm__title {
    font-size: 1.15rem !important;
    flex: 1 1 0 !important;
  }
  #cc-main .uxs-cmp__subtitle {
    font-size: 0.875rem !important;
    margin: 0.25rem 0 0 0 !important;
    line-height: 1.45;
  }
  #cc-main .pm__close-btn {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 auto;
  }
  #cc-main .pm__body {
    padding: 0.5rem 1rem 0.85rem !important;
  }
  #cc-main .pm__section,
  #cc-main .pm__section--toggle {
    padding: 0.75rem 0.85rem !important;
  }
  #cc-main .uxs-cmp__cat-icon {
    width: 2.25rem;
    height: 2.25rem;
  }
  #cc-main .pm__section-title {
    font-size: 0.95rem !important;
  }
  /* On mobile: stack bullets above description vertically in expanded card */
  #cc-main .pm__section--toggle.is-expanded .pm__section-desc-wrapper {
    flex-direction: column !important;
    gap: 0.65rem !important;
  }
  #cc-main .pm__section--toggle .pm__section-services,
  #cc-main .pm__section--toggle .pm__section-desc-wrapper .pm__section-desc {
    flex: 0 0 auto !important;
  }
  /* Footer: links centered + buttons stacked full-width */
  #cc-main .pm__footer {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0.85rem 1rem 1rem !important;
    gap: 0.6rem !important;
  }
  #cc-main .uxs-cmp__links {
    justify-content: center !important;
    margin: 0 !important;
    order: 2;
    font-size: 0.85rem;
  }
  #cc-main .pm__btn-group,
  #cc-main .pm__footer .btns,
  #cc-main .pm__footer > div:not(.uxs-cmp__links) {
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 0.4rem !important;
    order: 1;
  }
  #cc-main .pm__btn {
    width: 100% !important;
    flex: 1 1 auto !important;
  }
}