/* Landing page "How it works" product tour (2026.10.14).
   No scroll lock: the section scrolls like any other. While it is on
   screen, Know, Deploy, Answer, Learn play in turn (5s each) and the
   matching Eastbrook screen fades in. Click a step to jump; hovering a
   screen pauses it. Screens are the same HTML as /solutions-education. */
.dx-lp .dx-lp-tour .dx-head { margin-bottom: var(--dx-gap-m); }
.dx-lp .dx-lp-tour-track { position: relative; }
.dx-lp .dx-lp-tour-pin { position: relative; }
.dx-lp .dx-lp-tour-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: center;
}

/* Steps */
.dx-lp .dx-lp-tour-side { grid-column: 1 / span 4; position: relative; padding-left: 28px; }
.dx-lp .dx-lp-tour-bar { position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: var(--dx-cream-line); }
.dx-lp .dx-lp-tour-bar i { position: absolute; inset: 0; background: var(--dx-mustard); transform-origin: top; transform: scaleY(var(--p, 0)); }
.dx-lp .dx-lp-tour-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 3vh, 32px); }
.dx-lp .dx-lp-tour-steps li { margin: 0; cursor: pointer; opacity: 0.32; transition: opacity 0.4s ease; }
.dx-lp .dx-lp-tour-steps li:hover { opacity: 0.6; }
.dx-lp .dx-lp-tour-steps li.on { opacity: 1; }
.dx-lp .dx-lp-tour-steps .dx-num { display: block; margin-bottom: 8px; font-family: var(--dx-sans); font-weight: 600; font-size: var(--dx-t-label); letter-spacing: 0.16em; color: var(--dx-mustard); }
.dx-lp .dx-lp-tour-steps h3 {
  margin: 0;
  font-family: var(--dx-wide);
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  font-weight: 800;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--dx-cream);
}
.dx-lp .dx-lp-tour-steps p {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  font-family: var(--dx-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--dx-cream-70);
  max-width: 30ch;
  transition: max-height 0.4s ease, margin 0.4s ease;
}
.dx-lp .dx-lp-tour-steps li.on p { max-height: 6em; margin-top: 10px; }
.dx-lp .dx-lp-tour-cap { display: none; }

/* Screens */
.dx-lp .dx-lp-tour-stage { grid-column: 6 / -1; position: relative; height: min(64vh, 540px); }
.dx-lp .dx-lp-tour-screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(28px) scale(0.98);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0.6s;
}
.dx-lp .dx-lp-tour-screen.on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s; }
.dx-lp .dx-lp-tour-screen .dx-app { width: 100%; }
.dx-lp .dx-lp-tour-screen .dx-phones { width: 100%; max-width: min(460px, 48vh); margin: 0 auto; }
.dx-lp .dx-lp-tour-screen .dx-dep { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dx-lp .dx-lp-tour-screen .dx-dep-cap { display: none; }

@media (prefers-reduced-motion: reduce) {
  .dx-lp .dx-lp-tour-screen, .dx-lp .dx-lp-tour-steps li, .dx-lp .dx-lp-tour-steps p { transition: none; }
}

/* Phones: steps become a row of four, the active line sits under them */
@media (max-width: 900px) {
  .dx-lp .dx-lp-tour-grid { row-gap: 24px; }
  .dx-lp .dx-lp-tour-side, .dx-lp .dx-lp-tour-stage { grid-column: 1 / -1; }
  .dx-lp .dx-lp-tour-side { padding-left: 0; padding-top: 14px; }
  .dx-lp .dx-lp-tour-bar { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 2px; }
  .dx-lp .dx-lp-tour-bar i { transform-origin: left; transform: scaleX(var(--p, 0)); }
  .dx-lp .dx-lp-tour-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .dx-lp .dx-lp-tour-steps .dx-num { margin-bottom: 6px; }
  .dx-lp .dx-lp-tour-steps h3 { font-size: clamp(12px, 3.6vw, 18px); }
  .dx-lp .dx-lp-tour-steps p { display: none; }
  .dx-lp .dx-lp-tour-cap { display: block; margin: 14px 0 0; min-height: 3em; font-family: var(--dx-sans); font-size: 16px; line-height: 1.5; color: var(--dx-cream-70); }
  .dx-lp .dx-lp-tour-stage { height: min(52svh, 460px); }
  .dx-lp .dx-lp-tour-screen .dx-phones { max-width: min(320px, 40svh); gap: 12px; }
  .dx-lp .dx-lp-tour-screen .dx-dep { gap: 8px; }
}