:root {
  --interaction-hover: rgba(15, 23, 42, .045);
  --interaction-selected: rgba(15, 23, 42, .075);
  --interaction-pressed: rgba(15, 23, 42, .105);
  --interaction-focus: rgba(15, 23, 42, .68);
}

:root[data-theme='dark'] {
  --interaction-hover: rgba(255, 255, 255, .055);
  --interaction-selected: rgba(255, 255, 255, .095);
  --interaction-pressed: rgba(255, 255, 255, .13);
  --interaction-focus: rgba(245, 245, 247, .78);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --interaction-hover: rgba(255, 255, 255, .055);
    --interaction-selected: rgba(255, 255, 255, .095);
    --interaction-pressed: rgba(255, 255, 255, .13);
    --interaction-focus: rgba(245, 245, 247, .78);
  }
}

#home .top-rule {
  height: 1px;
  background: var(--line);
  opacity: .72;
}

#home .capability {
  isolation: isolate;
  border-radius: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(.2, .7, .2, 1);
}

#home .capability::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -12px -14px;
  border-radius: 14px;
  background: var(--interaction-hover);
  opacity: 0;
  transform: scale(.985);
  transition: opacity 160ms ease, transform 180ms cubic-bezier(.2, .7, .2, 1), background-color 120ms ease;
}

#home .capability:hover { transform: translateY(-2px); }
#home .capability[aria-current="true"]::before,
#home .capability:hover::before,
#home .capability:focus-visible::before { opacity: 1; transform: scale(1); }
#home .capability:hover .label,
#home .capability:hover .arrow,
#home .capability:focus-visible .label,
#home .capability:focus-visible .arrow { color: var(--ink); }
#home .capability:focus-visible { outline: 2px solid var(--interaction-focus); outline-offset: 8px; }
#home .capability:active { transform: translateY(0) scale(.985); }
#home .capability:active::before { background: var(--interaction-pressed); }

.story-step {
  cursor: pointer;
  isolation: isolate;
}

.story-step::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 14px -18px 28px;
  border-radius: 16px;
  background: var(--interaction-hover);
  opacity: 0;
  transform: scale(.992);
  transition: opacity 160ms ease, transform 180ms cubic-bezier(.2, .7, .2, 1), background-color 120ms ease;
  pointer-events: none;
}

.story-step:hover::after,
.story-step:focus-within::after { opacity: 1; transform: scale(1); }
.story-step.is-active::after { background: var(--interaction-selected); opacity: 1; transform: scale(1); }
.story-step:active::after { background: var(--interaction-pressed); }
.story-step-trigger { cursor: pointer; border-radius: 8px; }
.story-step-trigger:focus-visible { outline: 2px solid var(--interaction-focus); outline-offset: 7px; }
.story-step:not(.is-active) .story-step-trigger h3 { color: var(--muted); }
.story-step:hover .story-step-trigger h3,
.story-step:focus-within .story-step-trigger h3,
.story-step.is-active .story-step-trigger h3 { color: var(--ink); }
.story-step:active .story-step-trigger,
.story-step:active > p { transform: translateY(1px); }
.story-step-trigger,
.story-step > p { transition: color 160ms ease, transform 120ms ease; }
.story-step::before { background: var(--ink); height: 1px; }
.story-step.is-active::before { width: 42px; }
.story-coach .story-step::before { background: var(--ink); }

.executive-tab {
  position: relative;
  border-radius: 14px;
  transition: color 160ms ease, background-color 160ms ease, transform 120ms ease, padding-left 180ms ease;
}
.executive-tab:hover { padding-left: 8px; background: var(--interaction-hover); }
.executive-tab.is-active { background: var(--interaction-selected); color: var(--ink); }
.executive-tab:active { background: var(--interaction-pressed); transform: scale(.99); }
.executive-tab:focus-visible { outline: 2px solid var(--interaction-focus); outline-offset: 3px; }
.executive-tab.is-active .executive-tab-number { color: var(--ink); }
.executive-tab.is-active > span:last-child { color: var(--ink); }

@media (max-width: 900px) {
  #home .capability::before { inset: 8px -12px; }
}

@media (max-width: 760px) {
  .story-step::after { inset: 8px -12px 14px; border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  #home .capability,
  #home .capability::before,
  .story-step::after,
  .story-step-trigger,
  .story-step > p,
  .executive-tab { transition: none; }
  #home .capability:hover,
  #home .capability:active,
  #home .capability::before,
  .story-step::after,
  .story-step:active .story-step-trigger,
  .story-step:active > p,
  .executive-tab:active { transform: none; }
}

#home .capability[aria-current="true"]::before { background:var(--interaction-selected); }