/* Shared by marketing shells in both languages. Private CRM theme controls
   continue to use their own styles and the same NormTheme preference. */
.marketing-header--theme-cord .marketing-header__actions {
  align-self: stretch;
  /* Match the desktop action spacing at every viewport width. */
  gap: 12px;
}

.marketing-theme-cord {
  position: relative;
  align-self: stretch;
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0 0 12px 12px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.marketing-theme-cord:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* The hinge touches the upper edge of the header. Only its children stretch,
   so pulling the handle never detaches the cord from the ceiling. */
.marketing-theme-cord__pendulum {
  position: absolute;
  top: 0;
  left: calc(50% - 10px);
  width: 20px;
  height: calc(50% + 10px);
  pointer-events: none;
}

.marketing-theme-cord__strand {
  position: absolute;
  top: 0;
  left: 9px;
  width: 2px;
  height: calc(100% - 8px);
  /* Stop at the ring's edge, including during the pull animation. */
  clip-path: inset(0 0 4px);
  border-radius: 0 0 1px 1px;
  background: currentColor;
}

.marketing-theme-cord__handle {
  position: absolute;
  bottom: 0;
  left: 4px;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: transparent;
}

.marketing-theme-cord:hover,
.marketing-theme-cord:focus-visible {
  color: var(--color-primary);
}

/* The mobile icon is a sibling of the hamburger, outside its popup. */
@media (max-width: 980px) {
  .marketing-theme-cord { display: none; }

  .marketing-header--theme-cord .marketing-header-mobile-nav {
    --marketing-mobile-icon-color: #000;
    gap: 6px;
    align-items: center;
  }

  [data-theme="dark"] .marketing-header--theme-cord .marketing-header-mobile-nav {
    --marketing-mobile-icon-color: var(--color-text-strong);
  }

  /* Both header icons share a neutral color, including hover and focus. */
  .marketing-header--theme-cord .marketing-header-mobile-nav > .marketing-icon-button {
    color: var(--marketing-mobile-icon-color);
  }

  .marketing-header--theme-cord .marketing-header-mobile-nav > .marketing-theme-toggle {
    margin-right: 0;
    flex-shrink: 0;
  }

  /* Give the language row the same text inset and weight as the anchor rows,
     with no extra padding from the former two-control settings container. */
  .marketing-header--theme-cord .marketing-header__settings--mobile {
    margin-top: 0;
    padding: 0;
  }

  .marketing-header--theme-cord .marketing-header__settings--mobile .marketing-header-lang-form,
  .marketing-header--theme-cord .marketing-header__settings--mobile .marketing-header-lang {
    width: 100%;
  }

  .marketing-header--theme-cord .marketing-header__settings--mobile .marketing-language-button {
    width: 100%;
    height: auto;
    justify-content: flex-start;
    padding: 10px 11px;
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 500;
    line-height: inherit;
  }
}

/* Reserve space for both mobile icons at 320px, preserving the 12px gap
   between Demo and Log in and the full brand name. */
@media (max-width: 430px) {
  .marketing-header--theme-cord .marketing-header__inner { gap: 6px; }
  .marketing-header--theme-cord .marketing-header__action { padding-inline: 6px; }
}

/* Capture fully resolved theme colors; existing component transitions must not
   leave the new snapshot half recolored. No duplicate page DOM is created. */
html.marketing-theme-reveal *,
html.marketing-theme-reveal *::before,
html.marketing-theme-reveal *::after {
  transition: none !important;
}

html.marketing-theme-reveal::view-transition-group(root) {
  animation: none;
}

html.marketing-theme-reveal::view-transition-image-pair(root) {
  isolation: isolate;
}

html.marketing-theme-reveal::view-transition-old(root),
html.marketing-theme-reveal::view-transition-new(root) {
  mix-blend-mode: normal;
  animation: none;
}

html.marketing-theme-reveal::view-transition-old(root) { z-index: 1; }

html.marketing-theme-reveal::view-transition-new(root) {
  z-index: 2;
  animation: marketing-theme-reveal 680ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes marketing-theme-reveal {
  from { clip-path: circle(0px at var(--theme-cord-x) var(--theme-cord-y)); }
  to { clip-path: circle(var(--theme-cord-radius) at var(--theme-cord-x) var(--theme-cord-y)); }
}

@media (prefers-reduced-motion: reduce) {
  html.marketing-theme-reveal::view-transition-new(root) {
    animation: none;
  }
}