/* Final owner corrections, 6.1.25. Confined to Start choice and the
   Behavioral Science progression; the How We Work lens is unchanged. */

/* The shared kicker is a content-width flex box. Center that box within
   this existing centered introduction, rather than offsetting its text. */
body[data-version="v2"][data-route="start"] #app .center-title > .kicker {
  margin-inline: auto;
  max-width: 100%;
  justify-content: center;
}

/* Both meaningful endpoints belong to the same track coordinate system.
   They no longer inherit the old intermediary-span keyframes, which
   replaced translate(-50%,-50%) with scale() and shifted their centers. */
body[data-version="v2"][data-route="how-we-work"] #app .practice-line {
  position: relative;
  overflow: visible;
}

body[data-version="v2"][data-route="how-we-work"] #app .practice-line > .practice-dot {
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  opacity: 1;
  pointer-events: none;
}

body[data-version="v2"][data-route="how-we-work"] #app .practice-dot-start {
  left: 0;
  transform: translate(-50%, -50%);
  background: var(--teal, #176F73);
  box-shadow: 0 0 0 8px rgba(23,111,115,.16);
}

body[data-version="v2"][data-route="how-we-work"] #app .practice-dot-end {
  right: 0;
  transform: translate(50%, -50%);
  background: var(--amber, #D89A32);
}

/* Keep the existing line draw and text choreography. Arrival changes
   opacity only, so the destination's geometric registration cannot move. */
html:not([data-jdqps-a11y-motion="reduced"]) body[data-version="v2"][data-route="how-we-work"] #app .scene-in .practice-dot-end {
  animation: jdqpsPracticeDestination .42s ease 1s both;
}

@keyframes jdqpsPracticeDestination {
  from { opacity: .35; }
  to { opacity: 1; }
}

@media (max-width: 800px) {
  /* Reuse the approved vertical mobile progression with real vertical
     geometry; a later legacy rule had flattened this track to 3px tall. */
  body[data-version="v2"][data-route="how-we-work"] #app .practice-line {
    width: 3px;
    height: 70px;
    margin-left: 7px;
  }
  body[data-version="v2"][data-route="how-we-work"] #app .practice-line > .practice-dot {
    left: 50%;
    right: auto;
  }
  body[data-version="v2"][data-route="how-we-work"] #app .practice-line > .practice-dot-start {
    top: 0;
    transform: translate(-50%, -50%);
  }
  body[data-version="v2"][data-route="how-we-work"] #app .practice-line > .practice-dot-end {
    top: 100%;
    transform: translate(-50%, -50%);
  }
}

html[data-jdqps-a11y-motion="reduced"] .practice-line > .practice-dot {
  animation: none !important;
  opacity: 1 !important;
}

/* 6.1.29: the grid owns one complete native perimeter. Cells own only
   internal dividers. The top is no longer two separately painted cell edges.
   One rule width moves from the last column / row to the perimeter. Adding
   that width to the first track's half calculation preserves the original
   center line, content widths, text and dot positions at every container size.
   These are border-box dimensions, not device- or breakpoint-specific offsets. */
body[data-version="v2"][data-route="organizations"] #app .tax-grid,
body[data-version="v2"][data-route="individuals"] #app .tax-grid {
  --tax-rule: 1px;
  border: var(--tax-rule) solid currentColor !important;
  grid-template-columns: minmax(0, calc((100% + var(--tax-rule)) / 2)) minmax(0, 1fr);
  /* Pass 5 already settles this reading grid to opacity 1 / transform none.
     Release its obsolete layer hints; no entrance or scene timing changes. */
  will-change: auto !important;
  backface-visibility: visible !important;
}
body[data-version="v2"][data-route="organizations"] #app .tax-grid > span,
body[data-version="v2"][data-route="individuals"] #app .tax-grid > span {
  border-top: 0 !important;
}
body[data-version="v2"][data-route="organizations"] #app .tax-grid > span:nth-child(even),
body[data-version="v2"][data-route="individuals"] #app .tax-grid > span:nth-child(even) {
  border-right: 0 !important;
}
body[data-version="v2"][data-route="organizations"] #app .tax-grid > span:nth-last-child(-n + 2),
body[data-version="v2"][data-route="individuals"] #app .tax-grid > span:nth-last-child(-n + 2) {
  border-bottom: 0 !important;
}