/* Three pre-written levels of one Nerd post: Business owners, Marketing and operations, Tech teams.
   Without JavaScript all three show, one after another. With it, a tab bar picks one. */
.vers { margin: 2rem 0 2.5rem; }
.vers-bar { display: none; }
.js .vers-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.5rem; }
.vers-bar [role="tab"] {
  font: inherit; font-weight: 600; line-height: 1.2; min-height: 2.75rem; padding: 0.65rem 1.1rem;
  border: 2px solid var(--line); border-radius: 0.6rem; background: var(--white); color: var(--ink); cursor: pointer;
}
.vers-bar [role="tab"]:hover { border-color: var(--edge); }
.vers-bar [role="tab"][aria-selected="true"] { background: #0B1526; border-color: #0B1526; color: #fff; }
.vers-bar [role="tab"]:focus-visible { outline: 3px solid #0B4FA8; outline-offset: 2px; }
.vers-note { display: none; margin: 0 0 1.5rem; color: var(--slate); font-size: var(--step--1); }
.js .vers-note { display: block; }
.vers-h { margin: 0 0 1rem; }
.js .vers-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vers-panel + .vers-panel { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.js .vers-panel + .vers-panel { margin-top: 0; padding-top: 0; border-top: 0; }
.js .vers-panel[hidden] { display: none; }
.vers-panel ul { margin: 0 0 1.25rem; padding-left: 1.2em; }
.vers-next { display: none; margin: 2rem 0 0; }
.js .vers-next { display: block; }
.vers-next button {
  font: inherit; font-weight: 600; min-height: 2.75rem; padding: 0.65rem 1.1rem; cursor: pointer;
  border: 2px solid #0B1526; border-radius: 0.6rem; background: transparent; color: #0B1526;
}
.vers-next button:hover { background: #EAF0F7; }
.vers-next button:focus-visible { outline: 3px solid #0B4FA8; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .vers-panel:not([hidden]) { animation: vers-in 0.2s ease-out; } }
@keyframes vers-in { from { opacity: 0.4; } to { opacity: 1; } }