@import url("brand-typography.css");
@import url("tlr-layout.css?v=1");

:is(html, .theme-dark) {
  color-scheme: dark;
  --_color---color-light-1: rgb(20, 20, 19);
  --_color---color-light-2: #302f2c;
  --_color---color-dark: #faf9f5;
  --_color---color-text-dark: #faf9f5;
  --_color---color-text-light: #252524;
  --_color---color-dark-12: rgba(250, 249, 245, 0.12);
  --_color---color-dark-7: rgba(250, 249, 245, 0.08);
  --_color---color-light-1-10: rgba(250, 249, 245, 0.1);
  --_color---color-light-1-30: rgba(250, 249, 245, 0.18);
  --_color---color-glass-border: rgba(250, 249, 245, 0.16);
  --_color---color-glass-surface: rgba(48, 47, 44, 0.92);
  --_navbar---navbar-bg: rgb(20, 20, 19);
  --claude-text: #faf9f5;
  --claude-muted: #a39e95;
  --claude-bg: rgb(20, 20, 19);
  --claude-raised: #302f2c;
}

body {
  transition: background-color 0.4s ease, color 0.4s ease;
}

.navbar {
  transition: background-color 0.4s ease, color 0.4s ease;
}

:is(html, .theme-dark) .text---muted {
  opacity: 1;
  color: var(--claude-muted);
}

:is(html, .theme-dark) .button,
:is(html, .theme-dark) .button.light,
:is(html, .theme-dark) .button.bg-light-1,
:is(html, .theme-dark) .button.bg-light-2,
:is(html, .theme-dark) .button.bg-light-2---small,
:is(html, .theme-dark) .w-button,
:is(html, .theme-dark) .footer .button.light {
  background-color: var(--claude-text);
  color: var(--claude-bg);
  border-color: transparent;
}

:is(html, .theme-dark) .button:hover,
:is(html, .theme-dark) .button.light:hover,
:is(html, .theme-dark) .footer .button.light:hover {
  background-color: var(--claude-text);
  color: var(--claude-bg);
  opacity: 0.88;
}

:is(html, .theme-dark) .nav-link,
:is(html, .theme-dark) .nav-link.w--current,
:is(html, .theme-dark) .w-nav-link,
:is(html, .theme-dark) .w-nav-link.w--current,
:is(html, .theme-dark) .w-nav-brand,
:is(html, .theme-dark) .dropdown-toggle,
:is(html, .theme-dark) .w-dropdown-toggle,
:is(html, .theme-dark) .w-dropdown-link,
:is(html, .theme-dark) .dropdown-link,
:is(html, .theme-dark) .trigger-search,
:is(html, .theme-dark) .w-tab-link,
:is(html, .theme-dark) .tab-bar-item,
:is(html, .theme-dark) .tab-bar-item.w--current,
:is(html, .theme-dark) .arrow-link {
  color: var(--claude-text);
}

:is(html, .theme-dark) .tab-bar-item.w--current,
:is(html, .theme-dark) .w-tab-link.w--current {
  background-color: var(--claude-raised);
}

:is(html, .theme-dark) .w-dropdown-list,
:is(html, .theme-dark) .w-dropdown-toggle {
  background-color: transparent;
}

:is(html, .theme-dark) .w-nav {
  background-color: var(--claude-bg);
  color: var(--claude-text);
}

:is(html, .theme-dark) .footer {
  background-color: var(--claude-bg);
  color: var(--claude-text);
  border-top: 1px solid rgba(250, 249, 245, 0.12);
}

:is(html, .theme-dark) .footer-link,
:is(html, .theme-dark) .footer-copyright-link,
:is(html, .theme-dark) .heading---h3.footer-slogan {
  color: var(--claude-text);
}

:is(html, .theme-dark) .footer .form-input.light {
  background-color: rgba(250, 249, 245, 0.08);
  color: var(--claude-text);
}

:is(html, .theme-dark) .footer .form-input.light::placeholder {
  color: rgba(250, 249, 245, 0.5);
}

:is(html, .theme-dark) .section.padding-small.bg-dark,
:is(html, .theme-dark) .section.contained-hero,
:is(html, .theme-dark) .customer-video-section,
:is(html, .theme-dark) .pricing-table-1.bg-dark,
:is(html, .theme-dark) .contained-hero-wrap,
:is(html, .theme-dark) .client-logo-box,
:is(html, .theme-dark) .metric-box,
:is(html, .theme-dark) .customer-card,
:is(html, .theme-dark) .principle-box,
:is(html, .theme-dark) .boxed-hero,
:is(html, .theme-dark) .quote-box,
:is(html, .theme-dark) .square-box,
:is(html, .theme-dark) .license-photo-link {
  background-color: var(--claude-raised);
  color: var(--claude-text);
}

:is(html, .theme-dark) img[src$=".svg"] {
  filter: brightness(0) invert(1);
}

:is(html, .theme-dark) img[src*="-light."],
:is(html, .theme-dark) img[src*="integration-"],
:is(html, .theme-dark) img[src*="widget-icon-checkbox"],
:is(html, .theme-dark) img[src*="custom-checkbox"],
:is(html, .theme-dark) .footer-logo-image,
:is(html, .theme-dark) .button img {
  filter: none;
}

:is(html, .theme-dark) .form-input,
:is(html, .theme-dark) .form-input.light {
  color: var(--claude-text);
}

:is(html, .theme-dark) .form-input::placeholder,
:is(html, .theme-dark) .form-input.light::placeholder {
  color: var(--claude-muted);
}

.theme-dark,
:is(html, .theme-dark) body,
:is(html, .theme-dark) .navbar,
:is(html, .theme-dark) .navbar-menu,
:is(html, .theme-dark) .w-nav,
:is(html, .theme-dark) .w-nav-overlay,
:is(html, .theme-dark) .dropdown-content,
:is(html, .theme-dark) .dropdown-content-wide,
:is(html, .theme-dark) .dropdown-wrap,
:is(html, .theme-dark) .w-dropdown-list,
:is(html, .theme-dark) .features-navigator,
:is(html, .theme-dark) .search-modal-content,
:is(html, .theme-dark) .search-modal-form {
  background-color: rgb(20, 20, 19);
  color: #faf9f5;
}

:is(html, .theme-dark) :is(
  .nav-link,
  .nav-link.w--current,
  .dropdown-toggle,
  .dropdown-link,
  .dropdown-item,
  .dropdown-item-text,
  .arrow-link,
  .trigger-search,
  .w-nav-brand,
  .w-nav-link,
  .w-nav-link.w--current,
  .w-dropdown-toggle,
  .w-dropdown-link,
  .w-dropdown-btn,
  .w-tab-link,
  .w-tab-link.w--current,
  .tab-bar-item,
  .tab-bar-item.w--current,
  .text---badge,
  .text---bold,
  .text---lead,
  .footer-link,
  .footer-copyright-link,
  h1, h2, h3, h4, h5, h6,
  p:not(.tlr-nav__mega-label),
  li,
  label,
  small
) {
  color: #faf9f5 !important;
}

:is(html, .theme-dark) :is(.w-tab-link, .tab-bar-item, .w-dropdown-list, .w-nav-button.w--open) {
  background-color: rgb(20, 20, 19) !important;
  color: #faf9f5 !important;
}

:is(html, .theme-dark) :is(.w-tab-link.w--current, .tab-bar-item.w--current, .feature-navigator-link.w--current) {
  background-color: #302f2c !important;
  color: #faf9f5 !important;
}

:is(html, .theme-dark) :is(
  .button,
  .button.light,
  .button.bg-light-1,
  .button.bg-light-2,
  .button.bg-light-2---small,
  .w-button,
  input.w-button,
  .ai-info-card-btn,
  .runner-more
) {
  background-color: #faf9f5 !important;
  color: #252524 !important;
  border-color: transparent !important;
}

:is(html, .theme-dark) :is(.button, .w-button, .ai-info-card-btn, .runner-more) :is(
  .button-text-initial,
  .button-text-reveal,
  .button-text-wrap
) {
  color: #252524 !important;
  background-color: transparent !important;
}

:is(html, .theme-dark) .w-input,
:is(html, .theme-dark) .w-select,
:is(html, .theme-dark) .form-input,
:is(html, .theme-dark) .form-input.light {
  color: #faf9f5 !important;
  background-color: rgba(250, 249, 245, 0.08) !important;
}

:is(html, .theme-dark) .checkbox {
  border: 1px solid rgba(250, 249, 245, 0.45);
  background-color: transparent;
}

:is(html, .theme-dark) .checkbox.w--redirected-checked {
  background-color: #faf9f5;
}

:is(html, .theme-dark) img[src*=".svg"]:not(.footer-logo-image):not([src*="-light."]):not([src*="integration-"]):not([src*="widget-icon-checkbox"]) {
  filter: brightness(0) invert(1) !important;
}

/* Dark-only: remap Webflow light template surfaces */
:is(html, .theme-dark) {
  background-color: rgb(20, 20, 19);
}

:is(html, .theme-dark) body {
  background-color: rgb(20, 20, 19) !important;
  color: #faf9f5;
}

:is(html, .theme-dark) :is(
  .section,
  .section.bg-light-2,
  .section.bg-light-2.padding-bottom-large,
  .widget.bg-light-2,
  .cms-article-wrap,
  .cms-article-box,
  .cms-box-cta,
  .pricing-table-1,
  .pricing-card,
  .blog-card,
  .blog-post-card,
  .feature-navigator,
  .dropdown-screen,
  .w-slide,
  .customer-video-slide-wrap,
  .bento-wrap,
  .features-navigator-wrap,
  .integration-directory,
  .careers-list,
  .search-results
) {
  background-color: rgb(20, 20, 19) !important;
  color: #faf9f5;
}

:is(html, .theme-dark) :is(
  .customer-card,
  .metric-box,
  .principle-box,
  .boxed-hero,
  .quote-box,
  .square-box,
  .client-logo-box,
  .license-photo-link,
  .ai-info-card,
  .integration-card,
  .pricing-table-row,
  .tab-bar,
  .feature-navigator-link
) {
  background-color: #302f2c !important;
  color: #faf9f5;
}

:is(html, .theme-dark) .glass-surface {
  background-color: rgba(48, 47, 44, 0.92) !important;
  border-color: rgba(250, 249, 245, 0.16);
}

:is(html, .theme-dark) .w-richtext :is(p, li, h1, h2, h3, h4, h5, h6, blockquote) {
  color: #faf9f5;
}

:is(html, .theme-dark) :is(.form-success, .w-form-done) {
  background-color: #302f2c !important;
  color: #faf9f5 !important;
}

:is(html, .theme-dark) :is(.form-error, .w-form-fail) {
  background-color: #3a2f2f !important;
  color: #faf9f5 !important;
}