/* Register theme tokens as animatable colors */
@property --_theme---background {
  syntax: '<color>';
  inherits: true;
  initial-value: #ffffff;
}
@property --_theme---background-2 {
  syntax: '<color>';
  inherits: true;
  initial-value: #fafafa;
}
@property --_theme---hero-center-frame-outter {
  syntax: '<color>';
  inherits: true;
  initial-value: #ffffff;
}
@property --_theme---hero-center-frame-inner {
  syntax: '<color>';
  inherits: true;
  initial-value: #e9e6e9;
}
@property --_theme---background-skeleton {
  syntax: '<color>';
  inherits: true;
  initial-value: #d8c0f6;
}
@property --_theme---text {
  syntax: '<color>';
  inherits: true;
  initial-value: #342237;
}
@property --_theme---text-secondery {
  syntax: '<color>';
  inherits: true;
  initial-value: #69586c;
}
@property --_theme---text-secondary {
  syntax: '<color>';
  inherits: true;
  initial-value: #69586c;
}
@property --_theme---text-tertiary {
  syntax: '<color>';
  inherits: true;
  initial-value: #58475a;
}
@property --_theme---icon-wrapper {
  syntax: '<color>';
  inherits: true;
  initial-value: hsla(0, 0%, 100%, 0.5);
}
@property --_theme---text-link--text-card-link {
  syntax: '<color>';
  inherits: true;
  initial-value: #d8c0f6;
}
@property --_theme---heading-accent {
  syntax: '<color>';
  inherits: true;
  initial-value: #a66ee2;
}
@property --_theme---border {
  syntax: '<color>';
  inherits: true;
  initial-value: #dad4da;
}
@property --_theme---hover {
  syntax: '<color>';
  inherits: true;
  initial-value: #f3f2f3;
}
@property --_theme---border-secondary {
  syntax: '<color>';
  inherits: true;
  initial-value: #e9e6e9;
}
@property --_theme---border-brand_alt {
  syntax: '<color>';
  inherits: true;
  initial-value: #8f4bd2;
}
@property --_theme---border-brand {
  syntax: '<color>';
  inherits: true;
  initial-value: #a66ee2;
}
@property --_theme---text-badge {
  syntax: '<color>';
  inherits: true;
  initial-value: #58475a;
}
@property --_theme---icon_color {
  syntax: '<color>';
  inherits: true;
  initial-value: #b0a6b1;
}
@property --_theme---text-placeholder {
  syntax: '<color>';
  inherits: true;
  initial-value: #867489;
}
@property --_theme---fg-tertiary {
  syntax: '<color>';
  inherits: true;
  initial-value: #69586c;
}
@property --_theme---bg-pripary-alt {
  syntax: '<color>';
  inherits: true;
  initial-value: #ffffff;
}
@property --_theme---badge-bg {
  syntax: '<color>';
  inherits: true;
  initial-value: #faf7fe;
}
@property --_theme---badge-bg-02 {
  syntax: '<color>';
  inherits: true;
  initial-value: #ffffff;
}
@property --_theme---badge-border {
  syntax: '<color>';
  inherits: true;
  initial-value: #e9dcfb;
}
@property --_theme---badge-text {
  syntax: '<color>';
  inherits: true;
  initial-value: #803bbf;
}
@property --_theme---star-color {
  syntax: '<color>';
  inherits: true;
  initial-value: #8f4bd2;
}
@property --_theme---button-primary--background {
  syntax: '<color>';
  inherits: true;
  initial-value: #8f4bd2;
}
@property --_theme---button-primary--border {
  syntax: '<color>';
  inherits: true;
  initial-value: #8f4bd2;
}
@property --_theme---button-primary--text {
  syntax: '<color>';
  inherits: true;
  initial-value: #ffffff;
}
@property --_theme---button-primary--background-hover {
  syntax: '<color>';
  inherits: true;
  initial-value: #803bbf;
}
@property --_theme---button-primary--border-hover {
  syntax: '<color>';
  inherits: true;
  initial-value: #803bbf;
}
@property --_theme---button-primary--text-hover {
  syntax: '<color>';
  inherits: true;
  initial-value: #ffffff;
}
@property --_theme---button-secondary--background {
  syntax: '<color>';
  inherits: true;
  initial-value: #ffffff;
}
@property --_theme---button-secondary--border {
  syntax: '<color>';
  inherits: true;
  initial-value: #dad4da;
}
@property --_theme---button-secondary--text {
  syntax: '<color>';
  inherits: true;
  initial-value: #58475a;
}
@property --_theme---button-secondary--background-hover {
  syntax: '<color>';
  inherits: true;
  initial-value: #fafafa;
}
@property --_theme---button-secondary--border-hover {
  syntax: '<color>';
  inherits: true;
  initial-value: #dad4da;
}
@property --_theme---button-secondary--text-hover {
  syntax: '<color>';
  inherits: true;
  initial-value: #3d2f40;
}
@property --_theme---text-link--text {
  syntax: '<color>';
  inherits: true;
  initial-value: #803bbf;
}
@property --_theme---text-link--text-light {
  syntax: '<color>';
  inherits: true;
  initial-value: #e9dcfb;
}
@property --_theme---text-link--border {
  syntax: '<color>';
  inherits: true;
  initial-value: #d8c0f6;
}
@property --_theme---text-link--text-hover {
  syntax: '<color>';
  inherits: true;
  initial-value: #803bbf;
}
@property --_theme---text-link--border-hover {
  syntax: '<color>';
  inherits: true;
  initial-value: #e9dcfb;
}
@property --_theme---nav--background {
  syntax: '<color>';
  inherits: true;
  initial-value: #ffffff;
}
@property --_theme---feature-card--transparent-bg-50 {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(255, 255, 255, 0.5);
}
@property --_theme---feature-card--border-outer {
  syntax: '<color>';
  inherits: true;
  initial-value: #dad4da;
}
@property --_theme---feature-card--border-inner {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(0, 0, 0, 0.1);
}
@property --_theme---label--text {
  syntax: '<color>';
  inherits: true;
  initial-value: #803bbf;
}

/* Shared timing */
:root {
  --theme-dur: 320ms;
  --theme-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ancestor sweep. Every frame of a custom-property transition on <body>
 re-resolves style for the whole document (WebKit especially), so only the
 tokens that paint large surfaces animate; small UI (badges, links, icons,
 primary buttons) hard-cuts at the swap, which is not perceptible next to the
 fading backgrounds. Local hover/active transitions are suppressed for the
 duration of a theme change (see [data-theme-transitioning] below). */
body {
  container-type: normal;
  container-name: theme-scope;
  transition:
    --_theme---background var(--theme-dur) var(--theme-ease),
    --_theme---background-2 var(--theme-dur) var(--theme-ease),
    --_theme---hero-center-frame-outter var(--theme-dur) var(--theme-ease),
    --_theme---hero-center-frame-inner var(--theme-dur) var(--theme-ease),
    --_theme---text var(--theme-dur) var(--theme-ease),
    --_theme---text-secondery var(--theme-dur) var(--theme-ease),
    --_theme---text-secondary var(--theme-dur) var(--theme-ease),
    --_theme---text-tertiary var(--theme-dur) var(--theme-ease),
    --_theme---border var(--theme-dur) var(--theme-ease),
    --_theme---border-secondary var(--theme-dur) var(--theme-ease),
    --_theme---hover var(--theme-dur) var(--theme-ease),
    --_theme---bg-pripary-alt var(--theme-dur) var(--theme-ease),
    --_theme---nav--background var(--theme-dur) var(--theme-ease),
    --_theme---feature-card--transparent-bg-50 var(--theme-dur) var(--theme-ease),
    --_theme---feature-card--border-outer var(--theme-dur) var(--theme-ease),
    --_theme---feature-card--border-inner var(--theme-dur) var(--theme-ease),
    --_theme---button-secondary--background var(--theme-dur) var(--theme-ease),
    --_theme---button-secondary--border var(--theme-dur) var(--theme-ease),
    --_theme---button-secondary--text var(--theme-dur) var(--theme-ease),
    --_theme---badge-bg var(--theme-dur) var(--theme-ease);
}

/* While a theme change is in flight, every local transition on the page
 is disabled so nothing can double-animate against the sweep above.
 `transition: none` rather than `transition-duration: 0ms`: with 0ms
 Chrome still processes every listed transition on every frame of the
 sweep, which roughly doubles style recalc cost and drops frames. */
body[data-theme-transitioning='true'] * {
  transition: none !important;
}

/* Fallback for browsers without @property support */
/*@supports not (background: paint(x)) {
body, .section, .navigation, .nav_container, .dd_list, .features_card,
.feature_card_image, .feature_card_person, .footer_pill, .dd_list_button,
.input, .button {
  transition:
    background-color var(--theme-dur) var(--theme-ease),
    color            var(--theme-dur) var(--theme-ease),
    border-color     var(--theme-dur) var(--theme-ease);
}
}*/

img.dark_mode_filter {
  transition: filter var(--theme-dur) var(--theme-ease);
}

/* DevLink wraps Webflow's .theme-dark in @scope (.wf-devlink-…), so it never
 matches <body>. Mirror of its tokens — keep in sync with .theme-dark in
 src/generated/webflow/css/classes.css. */
body.theme-dark {
  --_theme---theme: 2;
  --_theme---background: var(--_default---swatch--neutral-950);
  --_theme---background-2: var(--_default---swatch--neutral-900);
  --_theme---background-skeleton: var(--_default---swatch--brand-700);
  --_theme---hero-center-frame-outter: var(--_default---swatch--neutral-800);
  --_theme---hero-center-frame-inner: #404040;
  --_theme---text: var(--_default---swatch--neutral-50);
  --_theme---text-secondary: #a3a3a3;
  --_theme---text-tertiary: #d4d4d4;
  --_theme---text-badge: #d4d4d4;
  --_theme---text-placeholder: var(--_default---swatch--neutral-500);
  --_theme---heading-accent: var(--_default---swatch--brand-400);
  --_theme---label--text: var(--_default---swatch--brand-500-main);
  --_theme---border: var(--_default---swatch--neutral-700);
  --_theme---border-secondary: var(--_default---swatch--neutral-800);
  --_theme---border-brand: var(--_default---swatch--brand-500-main);
  --_theme---border-brand_alt: var(--_default---swatch--neutral-700);
  --_theme---hover: var(--_default---swatch--neutral-800);
  --_theme---icon_color: var(--_default---swatch--neutral-500);
  --_theme---icon-wrapper: rgba(10, 10, 10, 0.5);
  --_theme---fg-tertiary: var(--_default---swatch--neutral-400);
  --_theme---bg-pripary-alt: var(--_default---swatch--neutral-900);
  --_theme---star-color: #a3a3a3;
  --_theme---badge-bg: var(--_default---swatch--brand-950);
  --_theme---badge-bg-02: var(--_theme---background);
  --_theme---badge-border: var(--_default---swatch--brand-800);
  --_theme---badge-text: var(--_default---swatch--brand-300);
  --_theme---button-primary--background: var(--_default---swatch--brand-600);
  --_theme---button-primary--border: var(--_default---swatch--brand-600);
  --_theme---button-primary--text: var(--_default---swatch--neutral);
  --_theme---button-primary--background-hover: var(--_default---swatch--brand-700);
  --_theme---button-primary--border-hover: var(--_default---swatch--brand-700);
  --_theme---button-primary--text-hover: var(--_default---swatch--neutral);
  --_theme---button-secondary--background: var(--_default---swatch--neutral-950);
  --_theme---button-secondary--border: var(--_default---swatch--neutral-700);
  --_theme---button-secondary--text: var(--_default---swatch--neutral-300);
  --_theme---button-secondary--background-hover: var(--_default---swatch--neutral-900);
  --_theme---button-secondary--border-hover: var(--_default---swatch--neutral-700);
  --_theme---button-secondary--text-hover: var(--_default---swatch--neutral-50);
  --_theme---text-link--text: #d4d4d4;
  --_theme---text-link--text-light: #d4d4d4;
  --_theme---text-link--text-hover: var(--_default---swatch--brand-100);
  --_theme---text-link--text-card-link: var(--_default---swatch--brand-400);
  --_theme---text-link--border: var(--_default---swatch--brand-400);
  --_theme---text-link--border-hover: var(--_default---swatch--brand-300);
  --_theme---nav--background: var(--_default---swatch--neutral-900);
  --_theme---feature-card--transparent-bg-50: rgba(10, 10, 10, 0.5);
  --_theme---feature-card--border-outer: var(--_default---swatch--neutral-700);
  --_theme---feature-card--border-inner: var(--_default---swatch--neutral-800);
}

/* Class-on-body fix — mix-blend-mode isn't animatable, stays a hard cut */
body.theme-dark .fluid_bg_absolute {
  mix-blend-mode: normal;
}

/* Token wiring for elements that need it */
.marquee_line {
  color: var(--_theme---border-secondary);
}
.nav_backdrop {
  background-color: color-mix(in srgb, var(--_theme---background) 0%, rgba(0, 0, 0, 0.35));
}
.dd_list_label:active {
  background-color: color-mix(in srgb, currentColor 6%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --theme-dur: 1ms;
  }
}

/* Pins the subtree to the light theme regardless of the body theme */
[data-theme-lock='light'] {
  /* Own container so theme style queries inside don't flip icons to dark */
  container-type: normal;
  container-name: theme-scope;
  --_theme---theme: 1;

  --_theme---background: initial;
  --_theme---background-2: initial;
  --_theme---hero-center-frame-outter: initial;
  --_theme---hero-center-frame-inner: initial;
  --_theme---background-skeleton: initial;
  --_theme---text: initial;
  --_theme---text-secondery: initial;
  --_theme---text-secondary: initial;
  --_theme---text-tertiary: initial;
  --_theme---icon-wrapper: initial;
  --_theme---text-link--text-card-link: initial;
  --_theme---heading-accent: initial;
  --_theme---border: initial;
  --_theme---hover: initial;
  --_theme---border-secondary: initial;
  --_theme---border-brand_alt: initial;
  --_theme---border-brand: initial;
  --_theme---text-badge: initial;
  --_theme---icon_color: initial;
  --_theme---text-placeholder: initial;
  --_theme---fg-tertiary: initial;
  --_theme---bg-pripary-alt: initial;
  --_theme---badge-bg: initial;
  --_theme---badge-bg-02: initial;
  --_theme---badge-border: initial;
  --_theme---badge-text: initial;
  --_theme---star-color: initial;
  --_theme---button-primary--background: initial;
  --_theme---button-primary--border: initial;
  --_theme---button-primary--text: initial;
  --_theme---button-primary--background-hover: initial;
  --_theme---button-primary--border-hover: initial;
  --_theme---button-primary--text-hover: initial;
  --_theme---button-secondary--background: initial;
  --_theme---button-secondary--border: initial;
  --_theme---button-secondary--text: initial;
  --_theme---button-secondary--background-hover: initial;
  --_theme---button-secondary--border-hover: initial;
  --_theme---button-secondary--text-hover: initial;
  --_theme---text-link--text: initial;
  --_theme---text-link--text-light: initial;
  --_theme---text-link--border: initial;
  --_theme---text-link--text-hover: initial;
  --_theme---text-link--border-hover: initial;
  --_theme---nav--background: initial;
  --_theme---feature-card--transparent-bg-50: initial;
  --_theme---feature-card--border-outer: initial;
  --_theme---feature-card--border-inner: initial;
  --_theme---label--text: initial;
}