/* Desktop hero mode rail: one guide, with breaks centred on each numbered row. */
@media (min-width: 761px) {
  .concept--trial .trial-hero__side-rule { display: none; }

  .concept--trial .hero-mode-selector {
    --mode-row-step: 38px;
    --rail-top-extension: clamp(180px, 22vh, 230px);
    --rail-bottom-extension: clamp(280px, 38vh, 390px);
    gap: 3px;
  }

  .concept--trial .hero-mode-selector::after {
    top: calc(-1 * var(--rail-top-extension));
    bottom: auto;
    left: -28px;
    width: 1px;
    height: calc(100% + var(--rail-top-extension) + var(--rail-bottom-extension));
    background: linear-gradient(
      to bottom,
      rgba(247, 247, 242, .42) 0 calc(var(--rail-top-extension) + 6px),
      transparent calc(var(--rail-top-extension) + 6px) calc(var(--rail-top-extension) + 30px),
      rgba(247, 247, 242, .3) calc(var(--rail-top-extension) + 30px) calc(var(--rail-top-extension) + 44px),
      transparent calc(var(--rail-top-extension) + 44px) calc(var(--rail-top-extension) + 68px),
      rgba(247, 247, 242, .3) calc(var(--rail-top-extension) + 68px) calc(var(--rail-top-extension) + 82px),
      transparent calc(var(--rail-top-extension) + 82px) calc(var(--rail-top-extension) + 106px),
      rgba(212, 175, 55, .52) calc(var(--rail-top-extension) + 106px) 100%
    );
  }

  .concept--trial .hero-mode-selector::before {
    top: 6px;
    left: -29px;
    width: 3px;
    height: 23px;
    box-shadow: 0 0 12px rgba(212, 175, 55, .38);
    transform: translateY(calc(var(--mode-index) * var(--mode-row-step)));
  }

  .concept--trial .hero-mode-selector button {
    grid-template-columns: 30px auto;
    min-height: 35px;
  }
}