.session-example.session-example .example-prompt-question strong {
  position: relative;
  isolation: isolate;
  display: inline-block;
  font-weight: inherit;
}

.session-example.session-example .example-prompt-question strong::after {
  position: absolute;
  z-index: -1;
  right: -.14em;
  bottom: -.05em;
  left: -.10em;
  height: .32em;
  background: var(--orange);
  clip-path: polygon(0 46%, 23% 28%, 62% 17%, 99% 0, 100% 47%, 64% 62%, 20% 100%, 0 91%);
  transform: scaleX(var(--feedback-underline, 1));
  transform-origin: left center;
  pointer-events: none;
  content: "";
}

.session-example.session-example .feedback-observation,
.session-example.session-example .feedback-practice {
  position: relative;
  isolation: isolate;
  padding: 13px 15px 13px 18px;
  border: 1px solid #e5edf7;
  border-radius: 7px;
  background: #fafcff;
}

.session-example.session-example .feedback-practice {
  border-color: #f4e4da;
  background: #fffaf6;
  color: #604135;
}

.session-example.session-example .feedback-observation::before,
.session-example.session-example .feedback-practice::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-left: 3px solid #2f57ef;
  border-radius: 6px;
  background: linear-gradient(103deg, #e8f0ff 8%, #f3f7fe 100%);
  clip-path: inset(0 calc((1 - var(--feedback-highlight, 1)) * 100%) 0 0);
  pointer-events: none;
  content: "";
}

.session-example.session-example .feedback-observation::before {
  --feedback-highlight: var(--feedback-observation, 1);
}

.session-example.session-example .feedback-practice::before {
  --feedback-highlight: var(--feedback-practice, 1);
  border-left-color: var(--orange);
  background: linear-gradient(103deg, #ffe9d9 8%, #fff6ed 100%);
}

.session-example.session-example .example-step-label { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .session-example.session-example .example-prompt-question strong::after { transform: none; }
  .session-example.session-example .feedback-observation::before,
  .session-example.session-example .feedback-practice::before { clip-path: none; }
}

@media (prefers-reduced-motion: no-preference) {
  #process .process-list[data-scroll-path] {
    position: relative;
    isolation: isolate;
  }

  #process .process-list[data-scroll-path]::before,
  #process .process-list[data-scroll-path]::after {
    position: absolute;
    top: var(--process-path-top);
    left: var(--process-path-left);
    width: 2px;
    height: var(--process-path-height);
    border-radius: 2px;
    pointer-events: none;
    content: "";
  }

  #process .process-list[data-scroll-path]::before {
    background: #b8cce8;
    transform: translateX(-50%);
  }

  #process .process-list[data-scroll-path]::after {
    background: var(--orange);
    transform: translateX(-50%) scaleY(var(--process-path-progress, 0));
    transform-origin: center top;
  }

  #process .process-list[data-scroll-path] .process-index {
    position: relative;
    z-index: 1;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  }

  #process .process-index[data-path-reached] {
    border-color: #dc6028;
    background: #fff1e7;
    color: #9b340f;
  }

  #process .process-index[data-path-current] {
    border-color: var(--orange);
    background: var(--orange);
    color: #23130c;
    box-shadow: 0 0 0 3px #f2632228;
  }

  #approach .phase-card[data-phase-entered] {
    animation: tarun-phase-enter 420ms cubic-bezier(.2, .75, .25, 1) backwards;
  }

  #approach .phase-card[data-phase-entered]:nth-child(2) {
    animation-delay: 65ms;
  }

  #approach .phase-card[data-phase-entered]:nth-child(3) {
    animation-delay: 130ms;
  }

  @keyframes tarun-phase-enter {
    from { transform: translateY(9px); }
    to { transform: translateY(0); }
  }
}