.capability-sticky {
  min-width: 0;
}

.capability-viewport {
  min-width: 0;
}

.capability-track {
  display: grid;
  gap: clamp(64px, 8vw, 112px);
}

.capability-panel {
  border-bottom: 1px solid var(--line-strong);
}

.capability-panel:last-child {
  border-bottom: 0;
}

.capability-panel.is-active .capability-panel-index {
  color: var(--brand-primary);
}

.capability-tabs button[aria-current="true"] {
  background: var(--canvas);
  color: var(--ink);
}

.capability-tabs button[aria-current="true"]::after {
  background: var(--coral);
}

@media (min-width: 1101px) {
  .capability-explorer[data-horizontal="true"] {
    height: calc(100vh - var(--header-height) + var(--capability-travel, 0px));
    border-bottom: 0;
  }

  .capability-explorer[data-horizontal="true"] .capability-sticky {
    position: sticky;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    overflow: hidden;
    background: var(--paper);
    border-bottom: 1px solid var(--line-strong);
  }

  .capability-explorer[data-horizontal="true"] .capability-tabs {
    position: relative;
    z-index: 2;
    background: var(--paper);
  }

  .capability-explorer[data-horizontal="true"] .capability-viewport {
    height: calc(100vh - var(--header-height) - 87px);
    overflow: clip;
  }

  .capability-explorer[data-horizontal="true"] .capability-track {
    height: 100%;
    display: flex;
    gap: clamp(32px, 4vw, 58px);
    align-items: stretch;
    width: max-content;
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }

  .capability-explorer[data-horizontal="true"] .capability-panel {
    flex: 0 0 var(--content);
    min-height: 0;
    height: 100%;
    grid-template-columns: minmax(330px, 0.7fr) minmax(0, 1.3fr);
    border-bottom: 0;
    opacity: 0.56;
    transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .capability-explorer[data-horizontal="true"] .capability-panel:first-child {
    margin-left: 0;
  }

  .capability-explorer[data-horizontal="true"] .capability-panel.is-active {
    opacity: 1;
  }

  .capability-explorer[data-horizontal="true"] .capability-panel-copy {
    padding: clamp(34px, 5vh, 58px) clamp(28px, 3vw, 48px) 34px 0;
    align-self: center;
  }

  .capability-explorer[data-horizontal="true"] .capability-panel h3 {
    margin: clamp(22px, 3vh, 38px) 0 20px;
    font-size: clamp(38px, 4vw, 60px);
  }

  .capability-explorer[data-horizontal="true"] .capability-panel ul {
    margin: clamp(20px, 3vh, 30px) 0;
  }

  .capability-explorer[data-horizontal="true"] .capability-panel-visual {
    height: auto;
    min-height: 0;
    margin: clamp(24px, 3.4vh, 36px) 0 clamp(24px, 3.4vh, 36px) 26px;
  }

  .capability-explorer[data-horizontal="true"] .capability-panel-visual img {
    min-height: 0;
    max-height: none;
  }
}

@media (max-width: 1100px) {
  .capability-track {
    margin-top: 0;
  }

  .capability-panel {
    scroll-margin-top: calc(var(--header-height) + 24px);
  }

  .capability-panel + .capability-panel {
    padding-top: clamp(48px, 8vw, 82px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .capability-explorer {
    height: auto !important;
  }

  .capability-sticky {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }

  .capability-viewport {
    height: auto !important;
    overflow: visible !important;
  }

  .capability-track {
    display: grid !important;
    width: auto !important;
    transform: none !important;
    will-change: auto !important;
  }

  .capability-panel {
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
  }
}