/* DrivenOS five stages as tabs (A122; picked over numbered rows on 2026-11-09). A numbered tab bar over a
   line, the active tab's underline fills while its demo plays and then the next tab opens; the panel has the title, line
   and tags on the left and the live demo on the right. */

.v3-tour__tabs { display: flex; border-bottom: 1px solid var(--line); }
.v3-tour__tab { position: relative; display: flex; flex: 1 1 0; align-items: center; gap: 12px; min-width: 0; padding: 14px 8px 17px; border: 0; background: none;
  color: #8b8b96; font: 600 16px/1.4 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; transition: color .15s ease-out; }
.v3-tour__tab:hover, .v3-tour__tab[aria-selected="true"] { color: var(--text); }
.v3-tour__tab:focus-visible { outline: 2px solid var(--pop); outline-offset: -2px; border-radius: 6px; }
.v3-tour__num { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border: 1px solid #3a3a44; border-radius: 50%;
  font-size: 13px; font-variant-numeric: tabular-nums; transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out; }
.v3-tour__tab[aria-selected="true"] .v3-tour__num { border-color: var(--pop); background: var(--pop); color: var(--pop-ink); }
/* The underline: full on the picked tab; while rotating it fills over the demo's length, then the next tab opens */
.v3-tour__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--pop); transform: scaleX(0); transform-origin: left; }
.v3-tour__tab[aria-selected="true"] .v3-tour__bar { transform: scaleX(1); }
.v3-tour.is-rotating .v3-tour__tab[aria-selected="true"] .v3-tour__bar { animation: v3-tour-fill var(--tour-dur, 8s) linear both; }
.v3-tour.is-rotating.is-paused .v3-tour__tab[aria-selected="true"] .v3-tour__bar { animation-play-state: paused; }
@keyframes v3-tour-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Panels share one grid cell, so the section keeps the tallest panel's height and nothing jumps when tabs change */
.v3-tour__panels { display: grid; margin-top: clamp(40px, 4vw, 64px); }
.v3-tour__panel { display: grid; grid-area: 1 / 1; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(32px, 5vw, 80px);
  visibility: hidden; opacity: 0; transition: opacity .35s ease-out, visibility 0s .35s; }
.v3-tour__panel.is-active { visibility: visible; opacity: 1; transition: opacity .35s ease-out; }
.v3-page .v3-tour__copy h3 { color: var(--text); font: 800 clamp(36px, 3.6vw, 56px)/1.02 var(--hf); letter-spacing: .005em; }
.v3-tour__copy p { max-width: 460px; margin-top: 16px; color: #b8b8b8; font-size: 18px; line-height: 1.6; }
/* A124: the stage's features as a two-column checklist, like HighLevel's, then one button */
.v3-tour__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 28px 0 0; padding: 0; list-style: none; }
.v3-tour__list li { display: flex; gap: 10px; color: #d0d0d6; font-size: 15px; line-height: 1.45; }
.v3-tour__list svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--pop); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.v3-tour__cta { margin-top: 32px; }
.v3-tour__panel .v3-ways__scene { border-radius: 16px; }
.v3-tour__stop { margin-top: 32px; padding: 0; border: 0; background: none; color: var(--text); font: 600 15px/1.6 Inter, system-ui, sans-serif;
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.v3-tour__stop:hover { color: var(--pop); }
.v3-tour__stop:focus-visible { outline: 2px solid var(--pop); outline-offset: 4px; border-radius: 4px; }

@media (max-width: 900px) {
  .v3-tour__panel { grid-template-columns: 1fr; align-items: start; gap: 28px; }
}
@media (max-width: 700px) {
  .v3-tour__tabs { overflow-x: auto; scrollbar-width: none; }
  .v3-tour__tabs::-webkit-scrollbar { display: none; }
  .v3-tour__tab { flex: 1 1 0; flex-direction: column; align-items: center; gap: 8px; padding: 10px 2px 14px; font-size: 12px; text-align: center; white-space: nowrap; }   /* five across a phone */
  .v3-tour__num { width: 28px; height: 28px; font-size: 12px; }
  .v3-tour__copy p { font-size: 16px; }
  .v3-tour__list { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .v3-tour__list li { white-space: nowrap; }
}
@media (max-width: 340px) {
  .v3-tour__tab { font-size: 11px; letter-spacing: -.01em; }
}
@media (prefers-reduced-motion: reduce) {
  .v3-tour__panel, .v3-tour__panel.is-active { transition: none; }
}