/**
 * Custom Overrides
 * ================
 * This file is loaded AFTER the Webflow-generated CSS files.
 * Put all custom styling changes here to keep them separate
 * from the vendored Webflow styles.
 */

/* ==========================================================================
   FEATURE TABS (Feature section)
   Use real <img> screenshots so the display area matches image dimensions
   (no letterboxing/padding/fill from background-size: contain).
   ========================================================================== */

/* Keep the screenshot area height consistent across tabs. */
.feature-tab-ui {
  height: 380px !important;
  background-image: none !important;
  background-color: transparent !important;
  overflow: clip !important;
  align-items: center !important;
}

/* Fit-to-width screenshot (no side padding). Extra space is top/bottom. */
.feature-tab-ui .feature-screenshot {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--_sizes---general--s);
  /* Note: we intentionally avoid object-fit here to preserve full-width rendering. */
}

/* ==========================================================================
   NAV
   Remove the "bubble"/pill around About / Workflow / Pricing links
   ========================================================================== */

/* Webflow sets a translucent rounded background + border on `.nav-menu`.
   We keep the flex layout + gaps, but remove the pill container styling. */
.nav-wrapper .nav-menu {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ==========================================================================
   LOOM VIDEO CARD IN HERO
   ========================================================================== */

/* Right side: Loom card/device wrapper */
.hero-right {
  position: relative;
}

.hero-loom-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 12px 40px rgba(0, 0, 0, 0.08);
  max-width: 920px;
  overflow: hidden;
  position: relative;
}

/* Browser-style top bar for the card */
.hero-loom-card::before {
  content: "";
  display: block;
  height: 36px;
  background: linear-gradient(to bottom, #f8f8f8, #f0f0f0);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  position: relative;
}

/* Fake browser dots */
.hero-loom-card::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 16px 0 0 #ffbd2e, 32px 0 0 #28c840;
}

/* Video container inside card */
.hero-loom-card .video-container {
  position: relative;
  padding-top: 65%; /* Aspect ratio for iframe */
}

.hero-loom-card .video-container iframe,
.hero-loom-card .video-container .w-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.hero-loom-card .w-video {
  padding-top: 0 !important;
}

/* Loom card scrollbar styling */
.hero-loom-card,
.hero-loom-card * {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.08) rgba(250, 249, 247, 0.3);
}

.hero-loom-card::-webkit-scrollbar,
.hero-loom-card *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.hero-loom-card::-webkit-scrollbar-track,
.hero-loom-card *::-webkit-scrollbar-track {
  background: rgba(250, 249, 247, 0.3);
  border-radius: 4px;
}

.hero-loom-card::-webkit-scrollbar-thumb,
.hero-loom-card *::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  border: 2px solid rgba(250, 249, 247, 0.3);
  background-clip: padding-box;
  transition: background-color 0.2s ease;
}

.hero-loom-card::-webkit-scrollbar-thumb:hover,
.hero-loom-card *::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.15);
}

.hero-loom-card::-webkit-scrollbar-corner,
.hero-loom-card *::-webkit-scrollbar-corner {
  background: rgba(250, 249, 247, 0.3);
}

/* Responsive adjustments */
@media screen and (max-width: 991px) {
  .hero-loom-card {
    border-radius: 12px;
  }

  .hero-loom-card::before {
    height: 28px;
  }

  .hero-loom-card::after {
    top: 9px;
    left: 10px;
    width: 8px;
    height: 8px;
    box-shadow: 12px 0 0 #ffbd2e, 24px 0 0 #28c840;
  }
}

/* ==========================================================================
   DARK MODE
   Supports both system preference and manual toggle via data-theme="dark"
   ========================================================================== */

/* Dark mode color palette */
:root {
  --dark-bg-primary: #0f0f0f;
  --dark-bg-secondary: #1a1a1a;
  --dark-bg-tertiary: #242424;
  --dark-bg-elevated: #2a2a2a;
  --dark-text-primary: #ffffff;
  --dark-text-secondary: rgba(255, 255, 255, 0.8);
  --dark-text-tertiary: rgba(255, 255, 255, 0.6);
  --dark-text-muted: rgba(255, 255, 255, 0.4);
  --dark-border: rgba(255, 255, 255, 0.1);
  --dark-accent: #4a9eff;
}

/* --------------------------------------------------------------------------
   Dark Mode - Manual Toggle (data-theme="dark")
   -------------------------------------------------------------------------- */

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="dark"] body {
  --background--bg-01: var(--dark-bg-primary);
  --background--bg-02: var(--dark-bg-secondary);
  --background--bg-03: var(--dark-bg-tertiary);
  --neutral--neutral-00: var(--dark-bg-primary);
  --neutral--neutral-01: var(--dark-bg-secondary);
  --neutral--neutral-02: var(--dark-bg-tertiary);
  --neutral--neutral-03: var(--dark-bg-elevated);
  --neutral--neutral-04: rgba(255, 255, 255, 0.08);
  --neutral--neutral-05: rgba(255, 255, 255, 0.12);
  --neutral--neutral-06: rgba(255, 255, 255, 0.16);
  --neutral--neutral-07: rgba(255, 255, 255, 0.24);
  --neutral--neutral-08: rgba(255, 255, 255, 0.32);
  --neutral--neutral-09: rgba(255, 255, 255, 0.48);
  --neutral--neutral-10: var(--dark-text-tertiary);
  --neutral--neutral-11: var(--dark-text-secondary);
  --neutral--neutral-12: var(--dark-text-primary);
  --overlay--overlay-01: rgba(255, 255, 255, 0.05);
  --overlay--overlay-02: rgba(255, 255, 255, 0.1);
  --overlay--overlay-03: rgba(0, 0, 0, 0.8);

  background-color: var(--dark-bg-primary) !important;
  color: var(--dark-text-primary) !important;
}

/* Navbar */
html[data-theme="dark"] .navbar {
  background-color: rgba(38, 38, 38, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .nav-wrap {
  background-color: transparent !important;
}

html[data-theme="dark"] .nav-wrapper {
  background-color: transparent !important;
}

html[data-theme="dark"] .nav-dropdown-menu {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

/* All text elements */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .display-h1,
html[data-theme="dark"] .display-h2,
html[data-theme="dark"] .display-h3,
html[data-theme="dark"] .display-h4,
html[data-theme="dark"] .display-h5,
html[data-theme="dark"] .display-h6 {
  color: var(--dark-text-primary) !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] .paragraph,
html[data-theme="dark"] .large-paragraph,
html[data-theme="dark"] .small-paragraph {
  color: var(--dark-text-secondary) !important;
}

html[data-theme="dark"] .t---neutral-10 {
  color: var(--dark-text-tertiary) !important;
}

/* Links */
html[data-theme="dark"]
  a:not(.primary-button):not(.outline-button):not(.navbar-link):not(.brand) {
  color: var(--dark-text-primary) !important;
}

html[data-theme="dark"] .navbar-link,
html[data-theme="dark"] .nav {
  color: var(--dark-text-primary) !important;
}

html[data-theme="dark"] .navbar-link:hover .nav,
html[data-theme="dark"] .navbar-link.footer:hover .nav {
  color: var(--dark-accent) !important;
}

/* Buttons */
html[data-theme="dark"] .primary-button {
  background-color: var(--dark-text-primary) !important;
  color: var(--dark-bg-primary) !important;
}

html[data-theme="dark"] .primary-button .nav,
html[data-theme="dark"] .primary-button p,
html[data-theme="dark"] .primary-button span,
html[data-theme="dark"] .primary-button .paragraph,
html[data-theme="dark"] .primary-button .small-paragraph {
  color: var(--dark-bg-primary) !important;
}

html[data-theme="dark"] .primary-button:hover {
  background-color: var(--dark-text-secondary) !important;
}

/* Keep "Try now" buttons the same blue in dark mode as in light mode */
html[data-theme="dark"]
  .primary-button[data-wf--primary-button--variant="black"] {
  background-color: #2a56a5 !important;
  color: #fff !important;
}

html[data-theme="dark"]
  .primary-button[data-wf--primary-button--variant="black"]
  .nav,
html[data-theme="dark"]
  .primary-button[data-wf--primary-button--variant="black"]
  p,
html[data-theme="dark"]
  .primary-button[data-wf--primary-button--variant="black"]
  span,
html[data-theme="dark"]
  .primary-button[data-wf--primary-button--variant="black"]
  .paragraph,
html[data-theme="dark"]
  .primary-button[data-wf--primary-button--variant="black"]
  .small-paragraph {
  color: #fff !important;
}

html[data-theme="dark"]
  .primary-button[data-wf--primary-button--variant="black"]:hover {
  background-color: #2a56a5 !important;
}

/* Arrow/icon inside the "Try now" button: keep blue arrow on white circle */
html[data-theme="dark"]
  .primary-button[data-wf--primary-button--variant="black"]
  .button-icon-wrap {
  background-color: #fff !important;
  color: #2a56a5 !important;
}

html[data-theme="dark"]
  .primary-button[data-wf--primary-button--variant="black"]
  .button-icon-wrap
  .icon {
  color: #2a56a5 !important;
}

html[data-theme="dark"] .outline-button {
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

html[data-theme="dark"] .outline-button:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Cards and containers */
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .process-card,
html[data-theme="dark"] .accordion-block,
html[data-theme="dark"] .team-profile-wrap {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

html[data-theme="dark"] .pricing-card .pricing-main,
html[data-theme="dark"] .tab-panel {
  background-color: var(--dark-bg-tertiary) !important;
}

/* Tabs */
html[data-theme="dark"] .tab-item,
html[data-theme="dark"] .pricing-menu-item {
  color: var(--dark-text-secondary) !important;
}

html[data-theme="dark"] .tab-item.w--current,
html[data-theme="dark"] .pricing-menu-item.w--current {
  background-color: var(--dark-bg-elevated) !important;
  color: var(--dark-text-primary) !important;
}

/* FAQ Accordions */
.accordion-toggle {
  justify-content: space-between;
  align-items: center;
  padding-left: 0;
}

.accordion-heading {
  flex: 1;
  text-align: left;
  padding-left: 0;
}

.accordion-heading h4 {
  text-align: left;
  font-size: 1.1rem;
  margin: 0;
  padding-left: 0;
}

.accordion-toggle.w-dropdown-toggle {
  padding-left: 0 !important;
}

.accordion-block .accordion-heading {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.accordion-block .accordion-heading h4.display-h6 {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Fix accordion question wrapping - override Webflow's pre-wrap which preserves HTML formatting */
.display-h6.wrap {
  white-space: normal;
  overflow-wrap: anywhere;
}

.accordion-block .accordion {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.accordion-heading {
  flex: 1;
  text-align: left;
  padding-left: 0 !important;
  margin-left: 0 !important;
  grid-column-gap: 0 !important;
}

/* Fix accordion text alignment in centered containers */
.container.centered .accordions {
  text-align: left;
  align-items: stretch;
}

.container.centered .accordion-block {
  text-align: left;
}

.container.centered .accordion-toggle {
  justify-content: space-between;
  text-align: left;
}

.accordion-button {
  flex-shrink: 0;
  margin-left: 1rem;
}

.accordion-button .icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Compact accordion blocks - reduced left padding to align questions further left */
.accordion-block.icon-plus {
  padding: 1rem 1.25rem 1rem 0.5rem;
}

.accordion-content {
  padding-top: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.accordions {
  gap: 0.5rem;
  padding: 0.25rem;
}

html[data-theme="dark"] .accordion {
  border-color: var(--dark-border) !important;
}

html[data-theme="dark"] .accordion-toggle {
  color: var(--dark-text-primary) !important;
}

html[data-theme="dark"] .accordion-content,
html[data-theme="dark"] .accordion-list {
  color: var(--dark-text-secondary) !important;
  background-color: var(--dark-bg-secondary) !important;
}

/* Testimonials */
html[data-theme="dark"] .testimonial {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

html[data-theme="dark"] .quote-svg {
  /* Force quote mark SVG to render light in dark mode (the source SVG is already light) */
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}

/* Hero section */
html[data-theme="dark"] .section.hero {
  background-color: var(--dark-bg-primary) !important;
}

html[data-theme="dark"] .header-bg,
html[data-theme="dark"] .stripe-gradient,
html[data-theme="dark"] .stripe-left-gradient,
html[data-theme="dark"] .stripe-right-gradient {
  opacity: 0.3 !important;
}

html[data-theme="dark"] .stripe {
  display: none !important;
}

/* Hero UI cards */
html[data-theme="dark"] .hero-ui-card,
html[data-theme="dark"] .hero-ui-card-2,
html[data-theme="dark"] .main-ui-image {
  filter: brightness(0.85) contrast(1.1);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}

/* Loom card in dark mode */
html[data-theme="dark"] .hero-loom-card {
  background-color: var(--dark-bg-secondary) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .hero-loom-card::before {
  background: linear-gradient(to bottom, #2a2a2a, #1f1f1f) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Process section images */
html[data-theme="dark"] .process-image {
  filter: brightness(0.9);
}

/* Ticker/Logo bar */
html[data-theme="dark"] .ticker-gradient-h,
html[data-theme="dark"] .ticker-gradient-v {
  background: linear-gradient(
    90deg,
    var(--dark-bg-primary),
    transparent
  ) !important;
}

html[data-theme="dark"] .ticker-gradient-h._2 {
  background: linear-gradient(
    270deg,
    var(--dark-bg-primary),
    transparent
  ) !important;
}

html[data-theme="dark"] .customer-logo-image {
  filter: brightness(0) invert(1) opacity(0.7) !important;
}

/* Pricing section
   The base Webflow design for `.section.inverse` / pricing is already dark.
   In dark mode, keep it looking exactly like "light mode" (don’t double-darken). */
html[data-theme="dark"] .section.inverse {
  background-color: var(--neutral--transparent) !important;
  border-color: transparent !important;
}

html[data-theme="dark"] .section.inverse .pricing-bg {
  opacity: 1 !important;
}

html[data-theme="dark"] .section.inverse .pricing-card {
  background-color: transparent !important;
  border-color: transparent !important;
}

html[data-theme="dark"] .section.inverse .pricing-card:hover {
  border-color: transparent !important;
}

html[data-theme="dark"] .section.inverse .pricing-card .pricing-main,
html[data-theme="dark"] .section.inverse .tab-panel {
  background-color: transparent !important;
}

/* Undo global dark-mode paragraph coloring inside the inverse section */
html[data-theme="dark"] .section.inverse p,
html[data-theme="dark"] .section.inverse .paragraph,
html[data-theme="dark"] .section.inverse .large-paragraph,
html[data-theme="dark"] .section.inverse .small-paragraph {
  color: var(--neutral--neutral-11) !important;
}

html[data-theme="dark"] .section.inverse .t---neutral-10 {
  color: var(--neutral--neutral-10) !important;
}

/* Restore Webflow tab styling in pricing */
html[data-theme="dark"] .section.inverse .pricing-menu-item {
  color: var(--neutral--neutral-12) !important;
  background-color: var(--neutral--neutral-01) !important;
}

html[data-theme="dark"] .section.inverse .pricing-menu-item:hover,
html[data-theme="dark"] .section.inverse .pricing-menu-item.w--current {
  background-color: var(--neutral--neutral-02) !important;
}

/* Remove forced dark-mode text overrides for pricing-specific labels */
html[data-theme="dark"] .section.inverse .pricing-title,
html[data-theme="dark"] .section.inverse .pricing-price,
html[data-theme="dark"] .section.inverse .pricing-period,
html[data-theme="dark"] .section.inverse .pricing-description,
html[data-theme="dark"] .section.inverse .pricing-benefit {
  color: inherit !important;
}

/* Contact section */
html[data-theme="dark"] .contact-bg {
  opacity: 0.4 !important;
}

/* Footer */
html[data-theme="dark"] .section.footer {
  background-color: var(--dark-bg-secondary) !important;
}

html[data-theme="dark"] .footer-contact .display-h1 {
  color: var(--dark-text-primary) !important;
}

html[data-theme="dark"] .social-icon {
  color: var(--dark-text-secondary) !important;
}

html[data-theme="dark"] .social-icon:hover {
  color: var(--dark-text-primary) !important;
}

/* Icons */
html[data-theme="dark"] .icon {
  color: var(--dark-text-primary) !important;
}

html[data-theme="dark"] .icon.m,
html[data-theme="dark"] .icon.l,
html[data-theme="dark"] .icon.xl {
  color: var(--dark-text-secondary) !important;
}

/* Tags */
html[data-theme="dark"] .tag {
  background-color: var(--dark-bg-elevated) !important;
  color: var(--dark-text-primary) !important;
}

/* Rating profiles */
html[data-theme="dark"] .rating-text .small-paragraph {
  color: var(--dark-text-secondary) !important;
}

/* Highlight text */
html[data-theme="dark"] .highlight {
  background: linear-gradient(
    180deg,
    transparent 60%,
    rgba(254, 247, 175, 0.3) 60%
  ) !important;
}

/* Process section */
html[data-theme="dark"] .section.workflow {
  background-color: var(--dark-bg-primary) !important;
}

html[data-theme="dark"] .workflow-bg {
  opacity: 0.15 !important;
}

/* Testimonial section */
html[data-theme="dark"] .section.testimonial-section {
  background-color: var(--dark-bg-primary) !important;
}

/* Accordion toggle icons */
html[data-theme="dark"] .accordion-toggle-icon {
  color: var(--dark-text-primary) !important;
}

/* Sections backgrounds */
html[data-theme="dark"] .section {
  background-color: var(--dark-bg-primary) !important;
}

/* Logo colors - invert for dark mode */
html[data-theme="dark"] .brand img,
html[data-theme="dark"] .footer-brand img {
  filter: brightness(0) invert(1) !important;
}

/* Card hover states */
html[data-theme="dark"] .pricing-card:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Text colors for specific elements */
html[data-theme="dark"] .pricing-title,
html[data-theme="dark"] .pricing-price,
html[data-theme="dark"] .pricing-period {
  color: var(--dark-text-primary) !important;
}

html[data-theme="dark"] .pricing-description,
html[data-theme="dark"] .pricing-benefit {
  color: var(--dark-text-secondary) !important;
}

/* Scrollbar styling */
html[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--dark-bg-secondary);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--dark-bg-elevated);
  border-radius: 4px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* --------------------------------------------------------------------------
   Dark Mode - System Preference (prefers-color-scheme: dark)
   Only applies when no explicit data-theme is set
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;
  }

  html:not([data-theme="light"]) body {
    --background--bg-01: #0f0f0f;
    --background--bg-02: #1a1a1a;
    --background--bg-03: #242424;
    --neutral--neutral-00: #0f0f0f;
    --neutral--neutral-01: #1a1a1a;
    --neutral--neutral-02: #242424;
    --neutral--neutral-03: #2a2a2a;
    --neutral--neutral-04: rgba(255, 255, 255, 0.08);
    --neutral--neutral-05: rgba(255, 255, 255, 0.12);
    --neutral--neutral-06: rgba(255, 255, 255, 0.16);
    --neutral--neutral-07: rgba(255, 255, 255, 0.24);
    --neutral--neutral-08: rgba(255, 255, 255, 0.32);
    --neutral--neutral-09: rgba(255, 255, 255, 0.48);
    --neutral--neutral-10: rgba(255, 255, 255, 0.6);
    --neutral--neutral-11: rgba(255, 255, 255, 0.8);
    --neutral--neutral-12: #ffffff;
    --overlay--overlay-01: rgba(255, 255, 255, 0.05);
    --overlay--overlay-02: rgba(255, 255, 255, 0.1);
    --overlay--overlay-03: rgba(0, 0, 0, 0.8);

    background-color: #0f0f0f !important;
    color: #ffffff !important;
  }

  /* Navbar */
  html:not([data-theme="light"]) .navbar {
    background-color: rgba(38, 38, 38, 0.95) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3) !important;
  }

  html:not([data-theme="light"]) .nav-wrap {
    background-color: transparent !important;
  }

  html:not([data-theme="light"]) .nav-wrapper {
    background-color: transparent !important;
  }

  html:not([data-theme="light"]) .nav-dropdown-menu {
    background-color: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  /* All text elements */
  html:not([data-theme="light"]) h1,
  html:not([data-theme="light"]) h2,
  html:not([data-theme="light"]) h3,
  html:not([data-theme="light"]) h4,
  html:not([data-theme="light"]) h5,
  html:not([data-theme="light"]) h6,
  html:not([data-theme="light"]) .display-h1,
  html:not([data-theme="light"]) .display-h2,
  html:not([data-theme="light"]) .display-h3,
  html:not([data-theme="light"]) .display-h4,
  html:not([data-theme="light"]) .display-h5,
  html:not([data-theme="light"]) .display-h6 {
    color: #ffffff !important;
  }

  html:not([data-theme="light"]) p,
  html:not([data-theme="light"]) .paragraph,
  html:not([data-theme="light"]) .large-paragraph,
  html:not([data-theme="light"]) .small-paragraph {
    color: rgba(255, 255, 255, 0.8) !important;
  }

  html:not([data-theme="light"]) .t---neutral-10 {
    color: rgba(255, 255, 255, 0.6) !important;
  }

  /* Links */
  html:not([data-theme="light"])
    a:not(.primary-button):not(.outline-button):not(.navbar-link):not(.brand) {
    color: #ffffff !important;
  }

  html:not([data-theme="light"]) .navbar-link,
  html:not([data-theme="light"]) .nav {
    color: #ffffff !important;
  }

  html:not([data-theme="light"]) .navbar-link:hover .nav,
  html:not([data-theme="light"]) .navbar-link.footer:hover .nav {
    color: #4a9eff !important;
  }

  /* Buttons */
  html:not([data-theme="light"]) .primary-button {
    background-color: #ffffff !important;
    color: #0f0f0f !important;
  }

  html:not([data-theme="light"]) .primary-button .nav,
  html:not([data-theme="light"]) .primary-button p,
  html:not([data-theme="light"]) .primary-button span,
  html:not([data-theme="light"]) .primary-button .paragraph,
  html:not([data-theme="light"]) .primary-button .small-paragraph {
    color: #0f0f0f !important;
  }

  html:not([data-theme="light"]) .primary-button:hover {
    background-color: rgba(255, 255, 255, 0.8) !important;
  }

  /* Keep "Try now" buttons the same blue in dark mode as in light mode */
  html:not([data-theme="light"])
    .primary-button[data-wf--primary-button--variant="black"] {
    background-color: #2a56a5 !important;
    color: #fff !important;
  }

  html:not([data-theme="light"])
    .primary-button[data-wf--primary-button--variant="black"]
    .nav,
  html:not([data-theme="light"])
    .primary-button[data-wf--primary-button--variant="black"]
    p,
  html:not([data-theme="light"])
    .primary-button[data-wf--primary-button--variant="black"]
    span,
  html:not([data-theme="light"])
    .primary-button[data-wf--primary-button--variant="black"]
    .paragraph,
  html:not([data-theme="light"])
    .primary-button[data-wf--primary-button--variant="black"]
    .small-paragraph {
    color: #fff !important;
  }

  html:not([data-theme="light"])
    .primary-button[data-wf--primary-button--variant="black"]:hover {
    background-color: #2a56a5 !important;
  }

  /* Arrow/icon inside the "Try now" button: keep blue arrow on white circle */
  html:not([data-theme="light"])
    .primary-button[data-wf--primary-button--variant="black"]
    .button-icon-wrap {
    background-color: #fff !important;
    color: #2a56a5 !important;
  }

  html:not([data-theme="light"])
    .primary-button[data-wf--primary-button--variant="black"]
    .button-icon-wrap
    .icon {
    color: #2a56a5 !important;
  }

  html:not([data-theme="light"]) .outline-button {
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
  }

  html:not([data-theme="light"]) .outline-button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }

  /* Cards and containers */
  html:not([data-theme="light"]) .pricing-card,
  html:not([data-theme="light"]) .process-card,
  html:not([data-theme="light"]) .accordion-block,
  html:not([data-theme="light"]) .team-profile-wrap {
    background-color: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  html:not([data-theme="light"]) .pricing-card .pricing-main,
  html:not([data-theme="light"]) .tab-panel {
    background-color: #242424 !important;
  }

  /* Tabs */
  html:not([data-theme="light"]) .tab-item,
  html:not([data-theme="light"]) .pricing-menu-item {
    color: rgba(255, 255, 255, 0.8) !important;
  }

  html:not([data-theme="light"]) .tab-item.w--current,
  html:not([data-theme="light"]) .pricing-menu-item.w--current {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
  }

  /* FAQ Accordions */
  html:not([data-theme="light"]) .accordion {
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  html:not([data-theme="light"]) .accordion-toggle {
    color: #ffffff !important;
  }

  html:not([data-theme="light"]) .accordion-content,
  html:not([data-theme="light"]) .accordion-list {
    color: rgba(255, 255, 255, 0.8) !important;
    background-color: #1a1a1a !important;
  }

  /* Testimonials */
  html:not([data-theme="light"]) .testimonial {
    background-color: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  html:not([data-theme="light"]) .quote-svg {
    /* Force quote mark SVG to render light in dark mode (the source SVG is already light) */
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
  }

  /* Hero section */
  html:not([data-theme="light"]) .section.hero {
    background-color: #0f0f0f !important;
  }

  html:not([data-theme="light"]) .header-bg,
  html:not([data-theme="light"]) .stripe-gradient,
  html:not([data-theme="light"]) .stripe-left-gradient,
  html:not([data-theme="light"]) .stripe-right-gradient {
    opacity: 0.3 !important;
  }

  html:not([data-theme="light"]) .stripe {
    display: none !important;
  }

  /* Hero UI cards */
  html:not([data-theme="light"]) .hero-ui-card,
  html:not([data-theme="light"]) .hero-ui-card-2,
  html:not([data-theme="light"]) .main-ui-image {
    filter: brightness(0.85) contrast(1.1);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
  }

  /* Loom card in dark mode */
  html:not([data-theme="light"]) .hero-loom-card {
    background-color: #1a1a1a !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.4) !important;
  }

  html:not([data-theme="light"]) .hero-loom-card::before {
    background: linear-gradient(to bottom, #2a2a2a, #1f1f1f) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  /* Process section images */
  html:not([data-theme="light"]) .process-image {
    filter: brightness(0.9);
  }

  /* Ticker/Logo bar */
  html:not([data-theme="light"]) .ticker-gradient-h,
  html:not([data-theme="light"]) .ticker-gradient-v {
    background: linear-gradient(90deg, #0f0f0f, transparent) !important;
  }

  html:not([data-theme="light"]) .ticker-gradient-h._2 {
    background: linear-gradient(270deg, #0f0f0f, transparent) !important;
  }

  html:not([data-theme="light"]) .customer-logo-image {
    filter: brightness(0) invert(1) opacity(0.7) !important;
  }

  /* Pricing section
     The base Webflow design for `.section.inverse` / pricing is already dark.
     In dark mode, keep it looking exactly like "light mode" (don’t double-darken). */
  html:not([data-theme="light"]) .section.inverse {
    background-color: var(--neutral--transparent) !important;
    border-color: transparent !important;
  }

  html:not([data-theme="light"]) .section.inverse .pricing-bg {
    opacity: 1 !important;
  }

  html:not([data-theme="light"]) .section.inverse .pricing-card {
    background-color: transparent !important;
    border-color: transparent !important;
  }

  html:not([data-theme="light"]) .section.inverse .pricing-card:hover {
    border-color: transparent !important;
  }

  html:not([data-theme="light"]) .section.inverse .pricing-card .pricing-main,
  html:not([data-theme="light"]) .section.inverse .tab-panel {
    background-color: transparent !important;
  }

  /* Undo global dark-mode paragraph coloring inside the inverse section */
  html:not([data-theme="light"]) .section.inverse p,
  html:not([data-theme="light"]) .section.inverse .paragraph,
  html:not([data-theme="light"]) .section.inverse .large-paragraph,
  html:not([data-theme="light"]) .section.inverse .small-paragraph {
    color: var(--neutral--neutral-11) !important;
  }

  html:not([data-theme="light"]) .section.inverse .t---neutral-10 {
    color: var(--neutral--neutral-10) !important;
  }

  /* Restore Webflow tab styling in pricing */
  html:not([data-theme="light"]) .section.inverse .pricing-menu-item {
    color: var(--neutral--neutral-12) !important;
    background-color: var(--neutral--neutral-01) !important;
  }

  html:not([data-theme="light"]) .section.inverse .pricing-menu-item:hover,
  html:not([data-theme="light"])
    .section.inverse
    .pricing-menu-item.w--current {
    background-color: var(--neutral--neutral-02) !important;
  }

  /* Remove forced dark-mode text overrides for pricing-specific labels */
  html:not([data-theme="light"]) .section.inverse .pricing-title,
  html:not([data-theme="light"]) .section.inverse .pricing-price,
  html:not([data-theme="light"]) .section.inverse .pricing-period,
  html:not([data-theme="light"]) .section.inverse .pricing-description,
  html:not([data-theme="light"]) .section.inverse .pricing-benefit {
    color: inherit !important;
  }

  /* Contact section */
  html:not([data-theme="light"]) .contact-bg {
    opacity: 0.4 !important;
  }

  /* Footer */
  html:not([data-theme="light"]) .section.footer {
    background-color: #1a1a1a !important;
  }

  html:not([data-theme="light"]) .footer-contact .display-h1 {
    color: #ffffff !important;
  }

  html:not([data-theme="light"]) .social-icon {
    color: rgba(255, 255, 255, 0.8) !important;
  }

  html:not([data-theme="light"]) .social-icon:hover {
    color: #ffffff !important;
  }

  /* Icons */
  html:not([data-theme="light"]) .icon {
    color: #ffffff !important;
  }

  html:not([data-theme="light"]) .icon.m,
  html:not([data-theme="light"]) .icon.l,
  html:not([data-theme="light"]) .icon.xl {
    color: rgba(255, 255, 255, 0.8) !important;
  }

  /* Tags */
  html:not([data-theme="light"]) .tag {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
  }

  /* Highlight text */
  html:not([data-theme="light"]) .highlight {
    background: linear-gradient(
      180deg,
      transparent 60%,
      rgba(254, 247, 175, 0.3) 60%
    ) !important;
  }

  /* Sections backgrounds */
  html:not([data-theme="light"]) .section {
    background-color: #0f0f0f !important;
  }

  /* Logo colors */
  html:not([data-theme="light"]) .brand img,
  html:not([data-theme="light"]) .footer-brand img {
    filter: brightness(0) invert(1) !important;
  }

  /* Pricing text */
  html:not([data-theme="light"]) .pricing-title,
  html:not([data-theme="light"]) .pricing-price,
  html:not([data-theme="light"]) .pricing-period {
    color: #ffffff !important;
  }

  html:not([data-theme="light"]) .pricing-description,
  html:not([data-theme="light"]) .pricing-benefit {
    color: rgba(255, 255, 255, 0.8) !important;
  }

  /* Scrollbar styling */
  html:not([data-theme="light"]) ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  html:not([data-theme="light"]) ::-webkit-scrollbar-track {
    background: #1a1a1a;
  }

  html:not([data-theme="light"]) ::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 4px;
  }

  html:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
  }
}

/* ==========================================================================
   DARK MODE TOGGLE BUTTON
   ========================================================================== */

.theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.theme-toggle svg {
  width: 24px;
  height: 24px;
  color: #000;
}

/* Sun icon (shown in dark mode) */
.theme-toggle .sun-icon {
  display: none;
}

/* Moon icon (shown in light mode) */
.theme-toggle .moon-icon {
  display: block;
}

/* Toggle button styling for dark mode - manual */
html[data-theme="dark"] .theme-toggle {
  background-color: #2a2a2a;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .theme-toggle svg {
  color: #ffffff;
}

html[data-theme="dark"] .theme-toggle .sun-icon {
  display: block;
}

html[data-theme="dark"] .theme-toggle .moon-icon {
  display: none;
}

/* Toggle button for explicit light mode */
html[data-theme="light"] .theme-toggle .sun-icon {
  display: none;
}

html[data-theme="light"] .theme-toggle .moon-icon {
  display: block;
}

/* Toggle button styling for dark mode - system preference */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .theme-toggle {
    background-color: #2a2a2a;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  }

  html:not([data-theme="light"]) .theme-toggle svg {
    color: #ffffff;
  }

  html:not([data-theme="light"]) .theme-toggle .sun-icon {
    display: block;
  }

  html:not([data-theme="light"]) .theme-toggle .moon-icon {
    display: none;
  }
}

/* ==========================================================================
   LOGO TICKER CUSTOMIZATION
   ========================================================================== */

/* Pause the ticker animation (keep for later) - DISABLED to show carousel
.ticker-content-h,
.ticker-content-v-up,
.ticker-content-v-down {
  animation: none !important;
  -webkit-animation: none !important;
  transform: none !important;
  -webkit-transform: none !important;
}
*/

/* Center the single logo - DISABLED for carousel
.hero-ticker .ticker-h {
  justify-content: center;
  align-items: center;
  min-height: 120px;
  overflow: visible;
}

.hero-ticker .ticker-content-h {
  justify-content: center;
  align-items: center;
  position: static !important;
  transform: none !important;
}
*/

/* AWI Logo styling - convert to grey */
.customer-logo-image.awi-logo {
  max-width: 140px;
  width: auto;
  height: 55px;
  display: inline-block;
  /* Convert colored logo to grey */
  filter: grayscale(100%);
  opacity: 0.5;
  vertical-align: bottom;
  margin: 0 12px;
}

/* Center the logo properly */
.hero-ticker {
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60px;
  overflow: visible;
  padding: 10px 0;
}

.customer-logo {
  background: transparent;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-ticker .ticker-h {
  width: 100%;
  min-height: 60px;
}

/* Dark mode: convert to light grey */
html[data-theme="dark"] .customer-logo-image.awi-logo {
  filter: brightness(0) saturate(100%) invert(1) brightness(0.8) !important;
  opacity: 0.85 !important;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .customer-logo-image.awi-logo {
    filter: brightness(0) saturate(100%) invert(1) brightness(0.8) !important;
    opacity: 0.85 !important;
  }
}

/* AWI Logo caption text */
.awi-logo-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
}

.awi-logo-caption {
  font-size: 13px;
  color: #888;
  font-weight: 400;
  letter-spacing: 0.02em;
  white-space: nowrap;
  display: inline;
  vertical-align: bottom;
  line-height: 1;
}

html[data-theme="dark"] .awi-logo-caption {
  color: #999;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .awi-logo-caption {
    color: #999;
  }
}

/* ==========================================================================
   WORKFLOW STEPPER - Animated vertical card flow
   Used on SEO landing pages (millwork, joinery, cabinet, etc.)
   ========================================================================== */

/* Container - single column vertical layout */
.workflow-stepper {
  --stepper-accent: #2a56a5;
  --stepper-line-color: rgba(255, 255, 255, 0.12);
  --stepper-card-bg: var(--background--bg-02, #1a1a1a);
  --stepper-icon-color: var(--stepper-accent);
  --stepper-dot-size: 16px;
  --stepper-line-left: 8px; /* Center of dot from left edge of stepper */

  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
  margin-top: 3.5rem !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 3rem !important;
  grid-template-columns: none !important;
}

/* Vertical connecting line on the left - background track */
/* Line connects from center of first dot to center of last dot */
/* Position is calculated dynamically by JS and set via --line-top, --line-height, --stepper-line-left */
.workflow-stepper::before {
  content: "";
  position: absolute;
  top: var(--line-top, calc(2rem + 11px));
  height: var(--line-height, calc(100% - 4rem - 22px));
  left: calc(
    var(--stepper-line-left, 8px) - 1px
  ); /* Center 2px line under dot center */
  width: 2px;
  background: var(--stepper-line-color);
  z-index: 0;
}

/* Animated progress line overlay - scroll-linked */
.workflow-stepper::after {
  content: "";
  position: absolute;
  top: var(--line-top, calc(2rem + 11px));
  height: var(--line-height, calc(100% - 4rem - 22px));
  left: calc(var(--stepper-line-left, 8px) - 1px); /* Same centering as track */
  width: 2px;
  background: var(--stepper-accent);
  z-index: 1;
  transform: scaleY(var(--line-progress, 0));
  transform-origin: top center;
  transition: transform 0.15s ease-out;
}

/* Fallback for when JS hasn't loaded yet - still animate on visibility */
.workflow-stepper.is-visible::after {
  transform: scaleY(var(--line-progress, 1));
}

/* Individual step card */
.workflow-step {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.5rem;
  background: var(--stepper-card-bg);
  border-radius: 16px;
  padding: 1.75rem 2rem;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
  border: 1px solid var(--stepper-line-color);
}

.workflow-step:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  transform: translateX(4px);
}

.workflow-stepper.is-visible .workflow-step:hover {
  transform: translateX(4px);
}

/* Staggered animation delays for scroll-triggered reveal */
.workflow-stepper.is-visible .workflow-step:nth-child(1) {
  transition-delay: 0.1s;
}
.workflow-stepper.is-visible .workflow-step:nth-child(2) {
  transition-delay: 0.25s;
}
.workflow-stepper.is-visible .workflow-step:nth-child(3) {
  transition-delay: 0.4s;
}
.workflow-stepper.is-visible .workflow-step:nth-child(4) {
  transition-delay: 0.55s;
}

.workflow-stepper.is-visible .workflow-step {
  opacity: 1;
  transform: translateX(0);
}

/* Timeline dot on the left line - centered on the line */
.workflow-step::before {
  content: "";
  position: absolute;
  /* Position dot centered on the line */
  left: calc(-3rem - 8px);
  top: 2rem;
  width: var(--stepper-dot-size);
  height: var(--stepper-dot-size);
  border-radius: 50%;
  background: var(--stepper-card-bg);
  border: 3px solid var(--stepper-accent);
  z-index: 3;
  transition: background-color 0.4s ease, border-color 0.4s ease,
    box-shadow 0.4s ease;
}

/* Dot activates when step is active */
.workflow-stepper.is-visible .workflow-step.step--active::before {
  background: var(--stepper-accent);
  border-color: var(--stepper-accent);
  box-shadow: 0 0 0 4px rgba(42, 86, 165, 0.25);
}

.workflow-step:hover::before,
.workflow-stepper.is-visible .workflow-step.step--active:hover::before {
  background: #081c3a; /* Darker than --stepper-accent (#2a56a5) */
  border-color: #081c3a;
}

/* Step icon */
.workflow-step__icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--stepper-icon-color);
  background: rgba(42, 86, 165, 0.1);
  border-radius: 12px;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.workflow-step:hover .workflow-step__icon {
  transform: scale(1.05);
  background: rgba(42, 86, 165, 0.15);
}

.workflow-step__icon svg {
  width: 28px;
  height: 28px;
}

/* Step content area */
.workflow-step__content {
  flex: 1;
  padding-top: 0.25rem;
}

.workflow-step__title {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.workflow-step__desc {
  font-size: 0.9375rem;
  line-height: 1.7;
  opacity: 0.75;
}

/* Hide badges and arrows (not used in vertical layout) */
.workflow-step__badge,
.workflow-step__header,
.workflow-step__arrow,
.workflow-step__arrow-down {
  display: none;
}

/* ==========================================================================
   WORKFLOW STEPPER - Tablet
   ========================================================================== */

@media screen and (max-width: 991px) {
  .workflow-stepper {
    gap: 1.25rem;
    margin-top: 2.5rem;
    padding-left: 2.5rem;
    max-width: 100%;
  }

  .workflow-stepper::before,
  .workflow-stepper::after {
    /* Let JS calculate --stepper-line-left, but provide fallback */
    left: calc(var(--stepper-line-left, 6px) - 1px);
  }

  .workflow-step {
    padding: 1.5rem;
    gap: 1.25rem;
  }

  .workflow-step::before {
    left: -2.5rem;
    width: 14px;
    height: 14px;
    transform: translateX(-1px);
  }

  .workflow-step__icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }

  .workflow-step__icon svg {
    width: 24px;
    height: 24px;
  }

  .workflow-step__title {
    font-size: 1.125rem;
  }

  .workflow-step__desc {
    font-size: 0.875rem;
  }
}

/* ==========================================================================
   WORKFLOW STEPPER - Mobile
   ========================================================================== */

@media screen and (max-width: 600px) {
  .workflow-stepper {
    gap: 1rem;
    margin-top: 2rem;
    padding-left: 2rem;
  }

  .workflow-stepper::before,
  .workflow-stepper::after {
    /* Let JS calculate --stepper-line-left, but provide fallback */
    left: calc(var(--stepper-line-left, 5px) - 1px);
  }

  .workflow-step {
    padding: 1.25rem;
    gap: 1rem;
    flex-direction: column;
  }

  .workflow-step::before {
    left: -2rem;
    top: 1.5rem;
    width: 12px;
    height: 12px;
    transform: translateX(-1px);
  }

  .workflow-step__icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
  }

  .workflow-step__icon svg {
    width: 22px;
    height: 22px;
  }

  .workflow-step__content {
    padding-top: 0;
  }

  .workflow-step__title {
    font-size: 1.0625rem;
  }

  .workflow-step__desc {
    font-size: 0.875rem;
    line-height: 1.6;
  }
}

/* ==========================================================================
   WORKFLOW STEPPER - Dark mode support
   ========================================================================== */

html[data-theme="dark"] .workflow-stepper {
  --stepper-line-color: rgba(255, 255, 255, 0.1);
  --stepper-card-bg: var(--dark-bg-secondary);
}

html[data-theme="dark"] .workflow-step:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .workflow-stepper {
    --stepper-line-color: rgba(255, 255, 255, 0.1);
    --stepper-card-bg: #1a1a1a;
  }

  html:not([data-theme="light"]) .workflow-step:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }
}

/* ==========================================================================
   WORKFLOW STEPPER - Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .workflow-stepper::before,
  .workflow-stepper::after {
    opacity: 1;
    transition: none;
  }

  .workflow-step {
    opacity: 1;
    transform: none;
    transition: box-shadow 0.3s ease;
  }

  .workflow-step__badge {
    transition: none;
  }

  .workflow-step__arrow,
  .workflow-step__arrow-down {
    opacity: 1;
    transition: none;
  }

  .workflow-stepper.is-visible .workflow-step {
    transition-delay: 0s !important;
  }
}