/* Homepage header actions, applied to the public snapshot of 24 September. Keep geometry fixed between states. */
#lt-homepage .masthead {
  --header-dark: #501c3f;
  --header-accent: #e9ee65;
}

#lt-homepage .masthead :is(.nav-access, .nav-demo) {
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  border: 1px solid transparent;
  color: var(--header-dark);
  background-color: transparent;
  transition: background-color 220ms cubic-bezier(0.16, 1, 0.3, 1),
    color 220ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

#lt-homepage .masthead .nav-demo {
  padding: 4px 12px;
}

/* Keep the existing mobile visibility rule; centre the desktop action. */
@media (min-width: 1200px) {
  #lt-homepage .masthead .nav-demo {
    display: inline-flex;
  }
}

#lt-homepage .masthead .nav-access {
  padding: 4px 12px;
  background-color: var(--header-dark);
  border-color: var(--header-dark);
  color: #fff;
}

#lt-homepage .masthead.is-scrolled .nav-access {
  background-color: transparent;
  color: var(--header-dark);
}

#lt-homepage .masthead.is-scrolled .nav-demo {
  background-color: var(--header-accent);
  border-color: var(--header-accent);
}

@media (hover: hover) and (pointer: fine) {
  #lt-homepage .masthead .nav-access:hover {
    background-color: rgba(80, 28, 63, .88);
    border-color: rgba(80, 28, 63, .5);
    color: var(--header-accent);
    text-decoration: none;
  }

  #lt-homepage .masthead.is-scrolled .nav-access:hover {
    background-color: var(--header-dark);
    border-color: var(--header-dark);
    color: #fff;
  }

  #lt-homepage .masthead.is-scrolled .nav-demo:hover {
    background-color: rgb(240, 244, 131);
    box-shadow: inset 0 0 0 1px var(--header-dark);
    text-decoration: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #lt-homepage .masthead :is(.nav-access, .nav-demo) {
    transition: none;
  }
}