/* Button-only theme layer. Artwork, animations and text retain their Framer colors. */
/* Applies before first paint and to links restored by Framer hydration. */
[data-swlx-hidden-link] {
  display: none !important;
}

:root {
  --swlx-button: #252525;
  --swlx-button-hover: #414147;
  --swlx-button-active: #151515;
  --swlx-text-button: #424242;
  --swlx-text-button-hover: #252525;
  --swlx-focus: #777777;
}

.swlx-visually-hidden {
  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;
}

.swlx-skip-link {
  position: fixed;
  z-index: 2147483647;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: #fff;
  background: var(--swlx-button);
  border-radius: 8px;
  transform: translateY(-160%);
}

.swlx-skip-link:focus {
  transform: translateY(0);
}

/* Loaded by CSS before first paint, so the logo cannot flash orange on refresh. */
[data-framer-component-type="SVG"][data-framer-name="logo"] {
  background-image: url("/logo-monochrome.svg") !important;
}

:is(
  [data-swlx-button="primary"],
  [data-framer-name^="primary" i]
) {
  background-color: var(--swlx-button) !important;
  box-shadow:
    0 0 0 1px var(--swlx-button),
    0 1px 2px rgba(0, 0, 0, 0.4),
    inset 0 0.75px rgba(255, 255, 255, 0.2) !important;
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease,
    transform 120ms ease !important;
}

@media (hover: hover) {
  :is(
    [data-swlx-button="primary"],
    [data-framer-name^="primary" i]
  ):hover {
    background-color: var(--swlx-button-hover) !important;
    box-shadow:
      0 0 0 1px var(--swlx-button-hover),
      0 2px 5px rgba(0, 0, 0, 0.28),
      inset 0 0.75px rgba(255, 255, 255, 0.24) !important;
  }
}

:is(
  [data-swlx-button="primary"],
  [data-framer-name^="primary" i]
):active {
  background-color: var(--swlx-button-active) !important;
  box-shadow:
    0 0 0 1px var(--swlx-button-active),
    0 1px 2px rgba(0, 0, 0, 0.32),
    inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

:is(
  [data-swlx-button="primary"],
  [data-framer-name^="primary" i]
):focus-visible {
  outline: 2px solid var(--swlx-focus);
  outline-offset: 3px;
}

/* Framer calls the text-style CTA used below cards “Variant 3”. */
:is([data-swlx-button="text"], [data-framer-name="Variant 3"]),
:is([data-swlx-button="text"], [data-framer-name="Variant 3"]) * {
  color: var(--swlx-text-button) !important;
  transition: color 160ms ease !important;
}

/* Text-button chevrons are inlined at build time and inherit this component color. */
:is([data-swlx-button="text"], [data-framer-name="Variant 3"]) svg {
  color: var(--swlx-text-button) !important;
}

:is([data-swlx-button="text"], [data-framer-name="Variant 3"]) svg path {
  stroke: currentColor !important;
  transition: stroke 160ms ease !important;
}

@media (hover: hover) {
  :is([data-swlx-button="text"], [data-framer-name="Variant 3"]):hover,
  :is([data-swlx-button="text"], [data-framer-name="Variant 3"]):hover * {
    color: var(--swlx-text-button-hover) !important;
  }

  :is([data-swlx-button="text"], [data-framer-name="Variant 3"]):hover svg path {
    stroke: currentColor !important;
  }
}

:is([data-swlx-button="text"], [data-framer-name="Variant 3"]):active,
:is([data-swlx-button="text"], [data-framer-name="Variant 3"]):active * {
  color: var(--swlx-button-active) !important;
}

:is([data-swlx-button="text"], [data-framer-name="Variant 3"]):active svg path {
  stroke: currentColor !important;
}

:is([data-swlx-button="text"], [data-framer-name="Variant 3"]):focus-visible {
  outline: 2px solid var(--swlx-focus);
  outline-offset: 3px;
}

/* Only the emphasized word in the home hero changes; its letter animation stays intact. */
[data-framer-name="hero"] [data-framer-name="Headline"] > p > span.framer-text {
  color: var(--swlx-button) !important;
}

/* Archived references retain their Framer nodes but no longer act as links. */
a[data-swlx-unlinked] {
  color: inherit !important;
  text-decoration: none !important;
  cursor: inherit !important;
  pointer-events: none;
}

/* Navigation for legacy exports that have no responsive header. */
.swlx-navigation {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: #fafafa;
  color: #333;
  font: 14px/1.4 Inter, sans-serif;
}
.swlx-navigation__inner {
  height: 72px;
  max-width: 1160px;
  margin: auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.swlx-navigation a { color: inherit; text-decoration: none; white-space: nowrap; }
.swlx-navigation a:hover { opacity: .75; }
.swlx-navigation a:focus-visible, .swlx-navigation summary:focus-visible { outline: 2px solid #555; outline-offset: 4px; }
.swlx-navigation img { display: block; width: 140px; height: 28px; }
.swlx-navigation__desktop, .swlx-navigation__actions { display: flex; align-items: center; gap: 24px; }
.swlx-navigation__actions { gap: 12px; }
.swlx-navigation__docs, .swlx-navigation__account { padding: 10px 16px; border-radius: 999px; border: 1px solid #e6e8eb; font-weight: 600; }
.swlx-navigation__account { background: #252525; color: white !important; border-color: #252525; }
.swlx-navigation span { margin-left: 6px; }
.swlx-navigation details, .swlx-navigation--mobile-only { display: none; }
@media (max-width: 809px) {
  [data-swlx-desktop-header], .swlx-navigation__desktop, .swlx-navigation__docs { display: none !important; }
  .swlx-navigation--mobile-only, .swlx-navigation details { display: block; }
  .swlx-navigation__inner { height: 58px; padding: 0 16px; gap: 12px; }
  .swlx-navigation img { width: 118px; height: auto; }
  .swlx-navigation__account { font-size: 12px; padding: 8px 12px; }
  .swlx-navigation summary { display: grid; place-items: center; width: 28px; height: 32px; cursor: pointer; list-style: none; }
  .swlx-navigation summary::-webkit-details-marker { display: none; }
  .swlx-navigation summary span { position: relative; width: 20px; height: 16px; margin: 0; }
  .swlx-navigation summary span::before, .swlx-navigation summary span::after { content: ''; position: absolute; inset: 4px 0 auto; height: 1.5px; background: #333; }
  .swlx-navigation summary span::after { top: 11px; }
  .swlx-navigation details[open] summary span::before { top: 8px; transform: rotate(45deg); }
  .swlx-navigation details[open] summary span::after { top: 8px; transform: rotate(-45deg); }
  .swlx-navigation details nav { position: absolute; top: 58px; left: 0; right: 0; display: grid; gap: 8px; padding: 12px 16px 20px; background: #fafafa; border-bottom: 1px solid #e6e8eb; }
  .swlx-navigation details nav a { padding: 8px 0; font-size: 20px; }
}