/* Only the Planning checks demo and its synchronised bullets. */
.planning-landing .planning-checks-animation .planning-checks-row {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  color: var(--navy);
  transition: opacity .4s ease, transform .4s ease, background .4s ease;
}
.planning-landing .planning-checks-animation .planning-checks-row[data-visible="false"] {
  opacity: 0;
  transform: translateY(6px);
}
.planning-landing .planning-checks-animation .planning-checks-row[data-state="flagged"] {
  background: color-mix(in srgb, var(--yellow) 20%, var(--white));
}
.planning-landing .planning-checks-animation .planning-checks-status {
  display: grid;
  min-width: 0;
  color: var(--navy);
}
.planning-checks-animation .planning-checks-row > span:first-child {
  overflow-wrap: anywhere;
}
.planning-checks-animation [data-check-status] {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  text-align: end;
  min-width: 0;
  white-space: normal;
  visibility: hidden;
  overflow-wrap: anywhere;
}
.planning-checks-animation [data-state="checking"] [data-check-status="checking"],
.planning-checks-animation [data-state="verified"] [data-check-status="verified"],
.planning-checks-animation [data-state="flagged"] [data-check-status="flagged"] {
  visibility: visible;
}
.planning-checks-animation [data-check-status] i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}
.planning-checks-animation [data-check-status="flagged"] i {
  background: var(--yellow);
}
.planning-checks-animation [data-check-status="checking"] i {
  width: 10px;
  height: 10px;
  border: 2px solid var(--gray-light);
  border-inline-end-color: var(--navy);
  background: transparent;
  animation: planning-check-spin .7s linear infinite;
}
.planning-checks-animation[data-running="false"] [data-check-status="checking"] i {
  animation-play-state: paused;
}
.planning-checks-animation [data-check-marker],
.planning-checks-animation [data-check-note],
.planning-checks-animation [data-check-ren],
.planning-checks-animation [data-check-you] {
  transition: opacity .4s ease, transform .4s ease;
}
.planning-checks-animation [data-visible="false"]:is(
  [data-check-marker], [data-check-note], [data-check-ren], [data-check-you]
) {
  opacity: 0;
}
.planning-checks-animation [data-visible="false"]:is([data-check-ren], [data-check-you]) {
  transform: translateY(6px);
}
.planning-checks-animation .planning-checks-message {
  display: grid;
  min-width: 0;
}
.planning-checks-animation .planning-checks-message-reserve,
.planning-checks-animation .planning-checks-message-typed {
  grid-area: 1 / 1;
}
.planning-checks-animation .planning-checks-message-reserve {
  visibility: hidden;
}
.planning-checks-animation .planning-checks-message-typed[data-typing="true"]::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-inline-start: 2px;
  vertical-align: -.1em;
  background: var(--navy);
}
.planning-checks [data-check-bullet] {
  transition: opacity .3s ease;
}
.planning-checks [data-check-bullet="inactive"] {
  opacity: .4;
}
.planning-checks [data-check-bullet] > span:first-child {
  transition: transform .3s ease;
}
.planning-checks [data-check-bullet="active"] > span:first-child {
  transform: translateX(3px);
}
@keyframes planning-check-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .planning-checks-animation *,
  .planning-checks [data-check-bullet],
  .planning-checks [data-check-bullet] > span:first-child {
    animation: none !important;
    transition: none !important;
  }
}