/* #1349 — For Employers: the design concept's story restored as clearly-labelled roadmap.
   #1378 — the middle of the page compressed into five tab panels (.vle-tabs); heavy blocks
   (device mocks, the carriers table, the plans ledger) sit behind the site's modals and
   the lists carry a per-item "Coming soon" tag. Without JS everything
   stacks and the pop-ups read inline (only .vle-tabs--js hides panels and modals).
   Loaded after landers.css (handle vivce-landers) on templates/for-employers.php only.
   Uses the --vl-* tokens from landers.css; adds only the tones the mocks need (warn / bad)
   at AA on their tints. Mocks are HTML+CSS, aria-hidden, each with a .vle-sr caption. */

.vl--employers {
  --vle-warn: #8A5300;
  --vle-warn-bg: #FFF3DC;
  --vle-bad: #B42318;
  --vle-bad-bg: #FEE7E7;
  --vle-pill-bg: #E4EBEE;
  --vle-mock-line: #EDEEF0;
  --vle-mock-soft: #F7F9F9;
  --vle-frame: #1B1D22;
  --vle-gold-bg: #FFF3D6;
  --vle-gold-ink: #8A5300;
  --vle-vio-bg: #EFEBFF;
  --vle-vio-ink: #4A22B8;
  --vle-arrow: #03AFB1;
  --vle-row-hi: #EAF7F7;
}

.vle-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- roadmap label (one per section) ---------- */
.vle-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: var(--vle-pill-bg);
  color: var(--vl-head);
  font: 700 12.5px/1.3 var(--vl-text);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 16px;
  vertical-align: middle;
}

.vle-pill svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.vl-band .vle-pill,
.vl-hero .vle-pill {
  background: rgba(255, 255, 255, .14);
  color: var(--vl-white);
  border: 1px solid rgba(255, 255, 255, .4);
}

.vle-pill--bar {
  margin: 0 0 0 auto;
  padding: 4px 10px 4px 8px;
  font-size: 11px;
  letter-spacing: .05em;
}

.vle-pill--bar svg {
  width: 13px;
  height: 13px;
}

.vl-head .vle-pill {
  margin-bottom: 18px;
}

/* ---------- tabs (#1378): intro line, sticky strip, five panels ---------- */
.vle-tabs {
  position: relative;
  background: var(--vl-white);
}

.vle-intro {
  padding: 56px 0 32px;
  text-align: center;
}

.vle-intro__text {
  max-width: 820px;
  margin: 0 auto;
}

/* the strip: a white bar with the site's teal underline tabs (.hub-tabs, .tabs__control);
   sticky below whatever the header keeps fixed (--vle-sticky-top is set by the script) */
.vle-strip__sentinel {
  height: 1px;
  margin-top: -1px;
}

.vle-strip {
  position: sticky;
  top: var(--vle-sticky-top, 0px);
  z-index: 30;
  background: var(--vl-white);
  border-bottom: 1px solid var(--vl-line);
}

.vle-strip.is-stuck {
  box-shadow: 0 10px 28px rgba(13, 55, 68, .08);
}

.vle-tablist {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 -16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.vle-tablist::-webkit-scrollbar {
  display: none;
}

.vle-tab {
  position: relative;
  flex: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 20px 16px 18px;
  font: 500 15.5px/1.3 var(--vl-text);
  color: var(--vl-muted);
  white-space: nowrap;
  cursor: pointer;
}

.vle-tab::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: var(--vl-teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}

.vle-tab:hover {
  color: var(--vl-head);
}

.vle-tab[aria-selected="true"] {
  color: var(--vl-head);
  font-weight: 600;
}

.vle-tab[aria-selected="true"]::after {
  transform: scaleX(1);
}

.vl .vle-tab:focus-visible,
.vl .vle-subtab:focus-visible {
  outline: 3px solid var(--vl-ink);
  outline-offset: -3px;
}

/* without the script the strip is just five buttons that do nothing: hide it */
.vle-tabs:not(.vle-tabs--js) .vle-strip {
  display: none;
}

.vle-tabs--js .vle-panel:not(.is-active),
.vle-panel[hidden] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .vle-tabs--js .vle-panel.is-active {
    animation: vle-tab-in .28s ease-out both;
  }

  @keyframes vle-tab-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}

/* panels are made of the page's ordinary sections, a little tighter (#1442: tighter again) */
.vle-panel > .vl-section {
  padding: 34px 0;
}

.vle-panel > .vl-band {
  padding: 34px 0;
}

.vle-panel .vl-head {
  margin-bottom: 18px;
}

/* the band's three clinician benefits go two-up on a wide screen (#1442) */
@media screen and (min-width: 993px) {
  .vle-panel .vl-band .vl-list {
    grid-template-columns: 1fr 1fr;
    gap: 14px 26px;
  }
}

/* sub-section titles inside a panel: the display face, one size down from the panel h2 */
.vle-h2--sub {
  font-size: 30px;
}

/* the three live items: one compact row, icon beside the text */
.vle-today {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 20px;
}

.vle-today__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  background: var(--vl-white);
  border: 1px solid var(--vl-line);
  border-radius: var(--vl-radius);
  padding: 20px;
  box-shadow: var(--vl-shadow);
}

.vle-today__item .vl-card__icon {
  width: 44px;
  height: 44px;
  margin: 0;
}

.vle-today__item .vl-card__icon svg {
  width: 20px;
  height: 20px;
}

.vle-today__item .vl-h3 {
  font-size: 17px;
  margin: 2px 0 6px;
}

.vle-today__item .vl-p {
  font-size: 15px;
  margin: 0;
}

/* moments: an accordion (#1442) whose four rows open the pop-ups */
.vle-moments {
  margin-top: 32px;
}

/* the LMS block folded into the integrations panel (#1442): one line and the pop-up link,
   in place of a section whose three rows repeated the pop-up word for word */
.vle-lmsline {
  margin-top: 28px;
  padding: 22px 24px;
  background: var(--vl-white);
  border: 1px solid var(--vl-line);
  border-radius: var(--vl-radius);
  box-shadow: var(--vl-shadow);
}

.vle-lmsline .vle-pill {
  margin-bottom: 12px;
}

.vle-lmsline .vl-h3 {
  margin-bottom: 6px;
}

.vle-lmsline .vl-p {
  margin: 0;
}

.vle-lmsline .vle-feat__meta {
  margin-top: 12px;
}

/* the setup steps behind an accordion (#1442) */
.vle-setup .vl-steps {
  margin: 0;
}

/* ---------- hero (#1442): compliance mock beside the copy, detail in an accordion ---------- */
.vle-hero__aside {
  position: relative;
}

.vle-hero-mock {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

/* the accordion under the mock: the four requirement rows and the two side cards, which
   used to sit inside the mock and float around it. Closed, it costs one line. */
.vle-heromore {
  max-width: 900px;
  margin: 14px auto 0;
  text-align: left;
}

.vle-heromore > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  cursor: pointer;
  list-style: none;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .45);
  font: 600 14px/1.4 var(--vl-text);
  color: var(--vl-white);
}

.vle-heromore > summary::-webkit-details-marker {
  display: none;
}

.vle-heromore > summary::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s ease;
}

.vle-heromore[open] > summary::before {
  transform: translateY(1px) rotate(-135deg);
}

.vle-heromore > summary:hover {
  background: rgba(255, 255, 255, .12);
}

.vle-heromore__body {
  margin-top: 12px;
  background: var(--vl-white);
  border-radius: var(--vl-radius);
  box-shadow: var(--vl-shadow-lift);
  padding: 8px 18px 18px;
}

.vle-heromore__body .vle-floats {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.vle-heromore__body .vle-float {
  position: static;
  max-width: none;
  box-shadow: none;
  border: 1px solid var(--vl-line);
}

.vle-hero-mock .vl-panel {
  max-width: none;
}

/* the hand-drawn arrow from the accordion pill to the row it opens (Dr. Reyes) */
.vle-heroarrow {
  display: none;
}

@media screen and (min-width: 993px) {
  .vle-heroarrow {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 4;
    fill: none;
    stroke: var(--vle-arrow);
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .vle-heroarrow__line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset .9s cubic-bezier(.5, 0, .3, 1) .3s;
  }

  .vle-heroarrow__head {
    opacity: 0;
    transition: opacity .2s ease 1.15s;
  }

  .vle-heroarrow.is-drawn .vle-heroarrow__line { stroke-dashoffset: 0; }
  .vle-heroarrow.is-drawn .vle-heroarrow__head { opacity: 1; }
}

/* the row the arrow lands on lights up while the pill is hovered or the record is open */
.vle-row.vle-row--opened {
  margin: 0 -10px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 8px;
  transition: background-color .15s ease;
}

.vle-hero__aside:has(.vle-heromore > summary:hover) .vle-row--opened,
.vle-hero__aside:has(.vle-heromore[open]) .vle-row--opened {
  background: var(--vle-row-hi);
}

.vle-hero__aside:has(.vle-heromore[open]) .vle-row--opened + .vle-row {
  border-top-color: transparent;
}

/* "Free" sticker on the hero's Connect button: the Free plan (#vl-plans) */
.vle-cta-free {
  position: relative;
}

.vle-cta-free__tag {
  position: absolute;
  top: -11px;
  right: -8px;
  padding: 3px 9px 4px;
  border-radius: 999px;
  background: var(--vl-white);
  color: var(--vl-head);
  font: 700 12px/1.2 var(--vl-text);
  letter-spacing: .02em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(13, 55, 68, .25);
  transform: rotate(6deg);
  pointer-events: none;
}

.vle-dash {
  padding: 18px 24px 14px;
}

.vle-dash__head {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 10px;
}

/* the section's one roadmap label, riding the panel's top edge (site pattern: .vl-claimtab) */
.vle-pill--tab {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  margin: 0;
  background: var(--vl-white);
  color: var(--vl-head);
  border: 1.5px solid var(--vl-teal);
  box-shadow: 0 6px 18px rgba(13, 55, 68, .2);
  white-space: nowrap;
}

.vle-dash__head,
.vle-mock__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.vle-dash__title,
.vle-mock__title {
  font: 700 16px/1.3 var(--vl-display);
  color: var(--vl-head);
}

.vle-dash__meta,
.vle-mock__meta {
  font: 600 12.5px/1.3 var(--vl-text);
  color: var(--vl-muted);
}

.vle-row {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.35fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--vle-mock-line);
}

.vle-row--first {
  border-top: 0;
}

.vle-row__name {
  font: 600 14px/1.3 var(--vl-text);
  color: var(--vl-ink);
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.vle-row__name small {
  display: block;
  flex-basis: 100%;
  font-weight: 400;
  font-size: 12px;
  color: var(--vl-muted);
}

.vle-chev {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--vl-teal);
  border-bottom: 2px solid var(--vl-teal);
  transform: translateY(-3px) rotate(45deg);
}

.vle-bar {
  height: 6px;
  border-radius: 4px;
  background: #E9EAEC;
  position: relative;
  overflow: hidden;
}

.vle-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 4px;
  background: var(--vl-teal);
}

.vle-row__credits {
  font: 400 12px/1.3 var(--vl-text);
  color: var(--vl-muted);
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}

.vle-status {
  display: inline-block;
  font: 700 11.5px/1.3 var(--vl-text);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.vle-status--good { color: var(--vl-good); background: var(--vl-good-bg); }
.vle-status--warn { color: var(--vle-warn); background: var(--vle-warn-bg); }
.vle-status--bad  { color: var(--vle-bad);  background: var(--vle-bad-bg); }

.vle-open {
  background: var(--vle-mock-soft);
  border-radius: 10px;
  padding: 4px 14px;
  margin: 0 0 10px;
}

.vle-req {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--vle-mock-line);
  font: 400 12.5px/1.3 var(--vl-text);
}

.vle-req:first-child {
  border-top: 0;
}

.vle-req__n {
  font-weight: 600;
  color: var(--vl-ink);
}

.vle-req__n small {
  display: block;
  font-weight: 400;
  font-size: 11.5px;
  color: var(--vl-muted);
}

.vle-req__v {
  color: var(--vl-body);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vle-req__due {
  font-weight: 600;
  white-space: nowrap;
  color: var(--vl-muted);
}

.vle-req__due--soon { color: var(--vle-warn); }
.vle-req__due--done { color: var(--vl-good); }

.vle-req__when {
  color: var(--vl-muted);
  font-size: 11.5px;
  white-space: nowrap;
  text-align: right;
}

.vle-req__btn {
  display: inline-block;
  background: var(--vl-teal);
  color: var(--vl-white);
  border-radius: 999px;
  padding: 5px 12px;
  font: 700 11.5px/1.3 var(--vl-text);
}

/* floating cards around the hero mock */
.vle-float {
  position: absolute;
  z-index: 2;
  background: var(--vl-white);
  border-radius: 12px;
  box-shadow: var(--vl-shadow-lift);
  padding: 14px 16px;
  max-width: 270px;
  text-align: left;
}

.vle-float--reimb { top: -30px; right: -36px; }

.vle-float--alert {
  bottom: -22px;
  left: -36px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.vle-float__label {
  font: 700 11px/1.3 var(--vl-text);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vl-muted);
}

.vle-float__line {
  font: 600 13.5px/1.35 var(--vl-text);
  color: var(--vl-ink);
  margin-top: 4px;
}

.vle-float__line .ok {
  color: var(--vl-good);
}

.vle-float__sub {
  font: 400 12px/1.35 var(--vl-text);
  color: var(--vl-muted);
  margin-top: 2px;
}

.vle-bell {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--vle-warn-bg);
  color: var(--vle-warn);
  display: grid;
  place-items: center;
}

.vle-bell svg {
  width: 16px;
  height: 16px;
}

/* what is live today: the hero's one note line, counts and "free for clinicians" together */
.vle-live {
  max-width: 620px;
  margin: 18px auto 0;
  font: 500 15px/1.55 var(--vl-text);
  color: var(--vl-hero-ink);
}

.vle-live b {
  color: var(--vl-white);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media screen and (min-width: 993px) {
  .vle-live {
    margin-left: 0;
    margin-right: 0;
  }

  .vle-heromore__body .vle-floats {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- generic mock panel (milestone, escalation, audit) ---------- */
.vle-mock {
  background: var(--vl-white);
  border-radius: 14px;
  box-shadow: var(--vl-shadow-lift);
  color: var(--vl-ink);
  text-align: left;
  overflow: hidden;
  font-family: var(--vl-text);
}

.vle-mock__body {
  padding: 16px 22px 12px;
}

.vle-mock__title {
  font-size: 15px;
}

.vle-mock__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid var(--vle-mock-line);
  margin-top: 6px;
  padding-top: 12px;
  font: 400 11.5px/1.35 var(--vl-text);
  color: var(--vl-muted);
}

.vle-toggle {
  font: 700 11px/1.3 var(--vl-text);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vl-teal);
  background: var(--vl-tint);
  border-radius: 999px;
  padding: 4px 11px;
  white-space: nowrap;
}

.vle-tl__item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 11px 0;
  border-top: 1px solid var(--vle-mock-line);
  font: 400 13.5px/1.35 var(--vl-text);
}

.vle-tl__item:first-child {
  border-top: 0;
}

.vle-tl__ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--vl-tint);
  color: var(--vl-teal);
}

.vle-tl__ico svg {
  width: 15px;
  height: 15px;
}

.vle-tl__ico--gold { background: var(--vle-gold-bg); color: var(--vle-gold-ink); }
.vle-tl__ico--vio  { background: var(--vle-vio-bg);  color: var(--vle-vio-ink); }

.vle-tl__item b {
  display: block;
  font-weight: 600;
  color: var(--vl-ink);
}

.vle-tl__item small {
  display: block;
  color: var(--vl-muted);
  font-size: 12px;
}

/* photo with a mock riding its lower edge */
.vle-stage {
  position: relative;
}

.vle-stage__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--vl-radius);
}

.vle-stage .vle-mock {
  position: relative;
  margin: -110px 18px 0 auto;
  max-width: 86%;
}

/* ---------- recognition: head + one list row beside the 62% quote ---------- */
.vle-recog {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 40px;
  align-items: center;
}

.vle-recog .vle-feats {
  margin-top: 22px;
}

.vle-recog .vl-quote {
  margin: 0;
}

/* ---------- a moment inside its pop-up: copy beside the device mock ---------- */
.vle-moment {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: center;
}

.vle-moment--ehr {
  grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr);
}

.vle-moment .vl-p + .vl-p {
  margin-top: 10px;
}

.vle-fine {
  font-size: 13px;
  line-height: 1.5;
  color: var(--vl-muted);
  margin: 14px 0 0;
}

.vle-moment__mock {
  min-width: 0;
}

.vle-moment__mock .vle-mock {
  max-width: 560px;
}

/* phone (moment 01) */
.vle-phonewrap {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 0 0 20px;
}

.vle-phone {
  width: 320px;
  max-width: 100%;
  border-radius: 38px;
  border: 9px solid var(--vle-frame);
  background: var(--vl-white);
  box-shadow: 0 28px 64px rgba(13, 55, 68, .28);
  overflow: hidden;
  color: var(--vl-ink);
  font-family: var(--vl-text);
}

.vle-ph-status {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px 6px;
  font: 600 11px/1 var(--vl-text);
}

.vle-ph-appbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--vle-mock-line);
  font: 600 14px/1.3 var(--vl-text);
}

.vle-ph-appbar .x,
.vle-ph-appbar .ico {
  color: var(--vl-muted);
}

.vle-ph-appbar .spacer {
  flex: 1;
}

.vle-ph-appbar svg {
  width: 16px;
  height: 16px;
}

.vle-ph-field {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 9px 16px;
  border-bottom: 1px solid #F0F1F3;
  font: 400 12.5px/1.4 var(--vl-text);
  color: var(--vl-ink);
}

.vle-ph-field .k {
  color: var(--vl-muted);
  min-width: 46px;
}

.vle-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F0F1F3;
  border-radius: 999px;
  padding: 3px 10px;
  font: 600 11.5px/1.4 var(--vl-text);
  color: #2F3137;
  max-width: 100%;
}

.vle-chip .av {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #7C818C;
  color: var(--vl-white);
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
  flex: none;
}

.vle-chip--magic {
  background: #D9F0F0;
  color: #0A4A50;
  box-shadow: 0 0 0 1.5px var(--vl-accent);
}

.vle-chip--magic .av {
  background: var(--vl-teal);
}

.vle-ph-body {
  padding: 14px 16px 10px;
  font: 400 12.5px/1.55 var(--vl-text);
  color: #2F3137;
}

.vle-ph-body p {
  margin: 0 0 10px;
  font-size: inherit;
  color: inherit;
}

.vle-ph-draft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 12px 12px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--vl-tint);
  font: 600 11px/1.35 var(--vl-text);
  color: #0A4A50;
}

.vle-ph-send {
  background: var(--vl-teal);
  color: var(--vl-white);
  border-radius: 999px;
  padding: 7px 18px;
  font: 700 12.5px/1.2 var(--vl-text);
  white-space: nowrap;
}

.vle-note {
  position: absolute;
  right: 4px;
  bottom: 150px;
  z-index: 2;
  max-width: 220px;
  background: var(--vl-white);
  border-radius: 12px;
  box-shadow: var(--vl-shadow-lift);
  padding: 12px 14px;
  font: 400 12.5px/1.45 var(--vl-text);
  color: #2F3137;
}

.vle-note b {
  color: var(--vl-head);
}

/* tablet EHR (moment 02) */
.vle-tablet {
  position: relative;
  border-radius: 24px;
  border: 11px solid var(--vle-frame);
  background: #F7F8FA;
  box-shadow: 0 30px 70px rgba(13, 55, 68, .32);
  overflow: hidden;
  font-family: var(--vl-text);
  color: #334155;
}

.vle-ehr {
  position: relative;
  min-height: 400px;
}

.vle-ehr__top {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 9px 14px;
  background: var(--vl-white);
  border-bottom: 1px solid #E5E7EB;
  font-size: 11px;
}

.vle-ehr__brand {
  font-weight: 800;
  color: #1E293B;
}

.vle-ehr__tabs {
  display: flex;
  gap: 12px;
  color: #5B6B7F;
  font-weight: 600;
  font-size: 10.5px;
}

.vle-ehr__tabs .on {
  color: #1D4ED8;
  box-shadow: 0 2px 0 #1D4ED8;
}

.vle-pt {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 14px;
  background: #EEF2F7;
  border-bottom: 1px solid #E5E7EB;
}

.vle-pt__av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #CBD5E1;
  color: #334155;
  font: 700 10px/1 var(--vl-text);
  display: grid;
  place-items: center;
  flex: none;
}

.vle-pt__name {
  font: 700 11.5px/1.3 var(--vl-text);
  color: #1E293B;
}

.vle-pt__meta {
  font-size: 9.5px;
  color: #5B6B7F;
}

.vle-ehr__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 14px;
  font-size: 10.5px;
}

.vle-ehr__card {
  background: var(--vl-white);
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 8px 10px;
}

.vle-ehr__card h5 {
  margin: 0 0 5px;
  font: 700 8.5px/1.3 var(--vl-text);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5B6B7F;
}

.vle-ehr__li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  border-top: 1px dashed #EEF0F3;
}

.vle-ehr__li:first-of-type {
  border-top: 0;
}

.vle-ehr__li .hl {
  color: #A14A00;
  font-weight: 700;
}

.vle-cme {
  position: absolute;
  right: 14px;
  top: 54px;
  width: 52%;
  min-width: 250px;
  z-index: 3;
  background: var(--vl-white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(2, 10, 20, .3);
}

.vle-cme__head {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 9px 12px;
  background: var(--vl-tint);
  border-bottom: 1px solid #CFE9E9;
}

.vle-cme__ico {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--vl-teal);
  color: var(--vl-white);
  display: grid;
  place-items: center;
  flex: none;
}

.vle-cme__ico svg {
  width: 13px;
  height: 13px;
}

.vle-cme__title {
  font: 800 11px/1.2 var(--vl-text);
  color: var(--vl-head);
}

.vle-cme__title small {
  display: block;
  font: 500 8.5px/1.3 var(--vl-text);
  color: var(--vl-muted);
}

.vle-cme__tier {
  margin-left: auto;
  font: 800 8px/1.3 var(--vl-text);
  letter-spacing: .06em;
  color: var(--vl-chip-ink);
  background: var(--vl-white);
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
}

.vle-cme__card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 9px;
  padding: 10px 12px;
  border-bottom: 1px solid #EEF0F3;
}

.vle-score {
  position: relative;
  width: 34px;
  height: 34px;
}

.vle-score svg {
  width: 34px;
  height: 34px;
  transform: rotate(-90deg);
}

.vle-score b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 800 10px/1 var(--vl-text);
  color: var(--vl-teal);
}

.vle-cme__t {
  display: block;
  font: 700 11px/1.25 var(--vl-text);
  color: #1E293B;
}

.vle-cme__src {
  font-size: 9px;
  color: #5B6B7F;
}

.vle-why {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.vle-why span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 700 8.5px/1.3 var(--vl-text);
  color: #334155;
  background: #F1F5F9;
  border-radius: 5px;
  padding: 2px 6px;
}

.vle-why i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--vl-accent);
}

.vle-why i.med  { background: #22A45D; }
.vle-why i.cond { background: #7C5CD6; }

.vle-cme__cta {
  display: flex;
  gap: 6px;
  margin-top: 7px;
}

.vle-cme__btn,
.vle-cme__ghost {
  font: 800 9px/1.3 var(--vl-text);
  padding: 4px 10px;
  border-radius: 6px;
}

.vle-cme__btn {
  background: var(--vl-teal);
  color: var(--vl-white);
}

.vle-cme__ghost {
  color: var(--vl-teal);
  border: 1px solid #CFE9E9;
}

.vle-cme__row2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #EEF0F3;
  font: 600 10px/1.3 var(--vl-text);
  color: #334155;
}

.vle-cme__row2 .sc {
  font-weight: 800;
  color: var(--vl-chip-ink);
  background: var(--vl-tint);
  border-radius: 5px;
  padding: 2px 6px;
}

.vle-cme__foot {
  padding: 7px 12px;
  font-size: 8.5px;
  color: #5B6B7F;
}

/* escalation ladder (moment 03) */
.vle-gantt {
  position: relative;
  padding-top: 4px;
}

.vle-g-axis {
  position: relative;
  margin-left: 118px;
  height: 18px;
  font: 600 10px/1 var(--vl-text);
  color: var(--vl-muted);
  letter-spacing: .04em;
}

.vle-g-axis span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}

.vle-g-axis .first {
  transform: none;
}

.vle-g-axis .end {
  transform: translateX(-100%);
  color: var(--vle-bad);
}

.vle-g-overlay {
  position: absolute;
  left: 118px;
  right: 0;
  top: 18px;
  bottom: 0;
  pointer-events: none;
}

.vle-g-today {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 43%;
  width: 2px;
  background: var(--vl-teal);
  opacity: .5;
}

.vle-g-today i {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  font: 700 9px/1 var(--vl-text);
  font-style: normal;
  letter-spacing: .08em;
  color: var(--vl-teal);
  background: var(--vl-white);
  padding: 0 4px;
}

.vle-g-deadline {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 0;
  border-right: 2px dashed rgba(180, 35, 24, .45);
}

.vle-g-row {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--vle-mock-line);
}

.vle-g-label b {
  display: block;
  font: 600 12.5px/1.25 var(--vl-text);
  color: var(--vl-ink);
}

.vle-g-label small {
  display: block;
  font: 400 10.5px/1.35 var(--vl-text);
  color: var(--vl-muted);
}

.vle-g-label .st-bad  { color: var(--vle-bad);  font-weight: 600; }
.vle-g-label .st-warn { color: var(--vle-warn); font-weight: 600; }
.vle-g-label .st-next { color: var(--vl-teal);  font-weight: 600; }

.vle-g-track {
  position: relative;
  height: 24px;
}

.vle-g-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: #F0F1F3;
  border-radius: 1px;
}

.vle-g-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #B4B8C0;
  border: 2px solid var(--vl-white);
  box-shadow: 0 0 0 1px #B4B8C0;
}

.vle-g-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 15px;
  border-radius: 8px;
  min-width: 16px;
}

.vle-g-bar--warn { background: #FFC61C; }
.vle-g-bar--next { background: var(--vl-accent); }
.vle-g-bar--plan { border: 2px dashed #B4B8C0; }

/* ---------- tables (carriers, plans) ---------- */
.vle-scroll {
  position: relative; /* contains the cells' .vle-sr captions, which otherwise widen the page at 390 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--vl-white);
  border: 1px solid var(--vl-line);
  border-radius: var(--vl-radius);
  box-shadow: var(--vl-shadow);
}

.vle-hint {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font: 700 12px/1.3 var(--vl-text);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vl-teal);
}

.vle-hint svg {
  width: 18px;
  height: 18px;
}

.vle-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  font: 400 14.5px/1.45 var(--vl-text);
  color: var(--vl-body);
}

.vle-table th {
  text-align: left;
  padding: 16px 18px;
  font: 700 11px/1.3 var(--vl-text);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vl-muted);
  border-bottom: 2px solid var(--vl-line);
  background: var(--vl-white);
}

.vle-table td {
  padding: 14px 18px;
  border-top: 1px solid var(--vl-line);
  vertical-align: top;
}

.vle-table tbody tr:first-child td {
  border-top: 0;
}

.vle-table .name {
  font-weight: 700;
  color: var(--vl-head);
  white-space: nowrap;
}

.vle-table .mkt {
  color: var(--vl-muted);
  font-size: 13.5px;
  white-space: nowrap;
}

.vle-table .credit {
  font-weight: 700;
  color: var(--vl-teal);
  white-space: nowrap;
}

.vle-table .quote {
  font-style: italic;
}

.vle-table th:first-child,
.vle-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--vl-white);
  box-shadow: 1px 0 0 var(--vl-line);
}

.vle-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  padding: 22px 26px;
  background: var(--vl-white);
  border: 1px solid var(--vl-line);
  border-left: 4px solid var(--vl-accent);
  border-radius: 0 12px 12px 0;
  box-shadow: var(--vl-shadow);
}

.vle-cta-row p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--vl-body);
  max-width: 62ch;
}

.vle-cta-row p b {
  color: var(--vl-head);
}

/* plans ledger */
.vle-ledger {
  min-width: 760px;
}

.vle-ledger th,
.vle-ledger td {
  text-align: left;
  vertical-align: top;
}

.vle-ledger thead th {
  vertical-align: bottom;
  padding: 24px 18px 22px;
  text-transform: none;
  letter-spacing: 0;
}

.vle-ledger thead th.feat .vl-eyebrow {
  margin: 0;
}

.vle-ledger .feat {
  width: 34%;
  font-weight: 600;
  color: var(--vl-ink);
}

.vle-ledger .feat small {
  display: block;
  font-weight: 400;
  color: var(--vl-muted);
  font-size: 12.5px;
}

.vle-ledger td.val {
  text-align: center;
  width: 22%;
  color: var(--vl-muted);
}

.vle-ledger .col-premium {
  background: #EEF7F7;
}

.vle-ledger thead th.col-premium {
  background: #EEF7F7;
}

.vle-tick {
  display: inline-flex;
  color: var(--vl-good);
}

.vle-nope {
  color: #9AA0AA;
}

.vle-note-val {
  font: 600 13px/1.3 var(--vl-text);
  color: var(--vl-ink);
}

.vle-ledger .group td {
  font: 700 11.5px/1.3 var(--vl-text);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vl-muted);
  padding: 26px 18px 8px;
}

.vle-ledger .group td span {
  margin-left: 8px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}

.vle-tier {
  display: inline-block;
  font: 800 10.5px/1.3 var(--vl-text);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 5px;
  margin-bottom: 10px;
  white-space: nowrap;
}

.vle-tier--free    { background: var(--vl-tint);     color: var(--vl-chip-ink); }
.vle-tier--premium { background: var(--vle-gold-bg); color: var(--vle-gold-ink); }
.vle-tier--custom  { background: var(--vle-pill-bg); color: var(--vl-head); }

.vle-tier-name {
  font: 800 21px/1.2 var(--vl-display);
  color: var(--vl-head);
}

.vle-tier-price {
  font: 600 13px/1.4 var(--vl-text);
  color: var(--vl-muted);
  margin: 4px 0 14px;
}

.vle-ledger .vl-btn {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
}

.vle-draft {
  margin: 18px auto 0;
  max-width: 820px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--vl-muted);
  text-align: center;
}

/* ---------- LMS flow ---------- */
.vle-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  margin-bottom: 40px;
}

.vle-lms {
  background: var(--vl-white);
  border-radius: 14px;
  box-shadow: var(--vl-shadow-lift);
  overflow: hidden;
  color: var(--vl-ink);
}

.vle-lms__body {
  padding: 14px 20px 8px;
}

.vle-lms h4 {
  margin: 0 0 6px;
  font: 700 14px/1.3 var(--vl-display);
  color: var(--vl-head);
}

.vle-lms__course {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--vle-mock-line);
  font: 400 12.5px/1.35 var(--vl-text);
}

.vle-lms__course:first-of-type {
  border-top: 0;
}

.vle-lms__course small {
  color: var(--vl-muted);
  white-space: nowrap;
}

.vle-flow__mid {
  position: relative;
  padding: 10px 18px;
  text-align: center;
}

.vle-flow__arrow {
  display: block;
  width: 100%;
  height: 54px;
}

.vle-flow__arrow path {
  fill: none;
  stroke: var(--vl-teal);
  stroke-width: 3;
}

.vle-flow__arrow polygon {
  fill: var(--vl-teal);
}

.vle-flow__lbl {
  font: 600 12.5px/1.4 var(--vl-text);
  color: var(--vl-body);
  margin: 2px 0 12px;
}

.vle-flow__lbl--up {
  margin: 0 0 2px;
}

.vle-flow__chip {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--vl-white);
  border: 2px solid var(--vl-teal);
  color: var(--vl-teal);
  font: 800 11px/1.3 var(--vl-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.vle-cw {
  background: var(--vl-white);
  border-radius: 14px;
  box-shadow: var(--vl-shadow-lift);
  padding: 28px 24px;
  text-align: center;
}

.vle-cw img {
  height: 40px;
  width: auto;
  max-width: 100%;
}

.vle-cw p {
  margin: 12px 0 0;
  font: 600 13px/1.4 var(--vl-text);
  color: var(--vl-body);
}

/* ---------- integrations (categories, no logos): the via-label on a list row ---------- */
.vle-via {
  display: block;
  margin-top: 14px;
  font: 700 11.5px/1.4 var(--vl-text);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vl-teal);
}

/* ---------- five steps ---------- */
.vle-steps5 {
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

/* #1424: five across meant a 82px number gutter left the text ~120px, so every
   title broke after one or two words. The number now shares a top row with the
   tier tag and the copy runs the full width of the card. */
.vle-steps5 .vl-step {
  padding: 22px 20px 24px;
}

.vle-steps5 .vl-step::before {
  left: 20px;
  top: 20px;
  width: 34px;
  height: 34px;
  font-size: 15px;
  line-height: 34px;
}

.vle-steps5 .vl-tag {
  margin-left: 44px;   /* clears the number, which is absolutely placed */
  vertical-align: middle;
}

.vle-steps5 .vl-h3 {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.3;
  text-wrap: pretty;
}

.vle-steps5 .vl-p {
  margin-top: 8px;
}

.vl-tag--coming {
  background: var(--vle-pill-bg);
  color: var(--vl-head);
}

.vl-step .vle-soon {
  margin-top: 14px;
}

.vl-step .vl-p {
  margin-bottom: 0;
}


/* ---------- feature lists (#1378): one row per item, a tag on every roadmap item ---------- */
.vle-feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.vle-feats--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vle-feats--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vle-feat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 15px 18px;
  background: var(--vl-white);
  border: 1px solid var(--vl-line);
  border-radius: 14px;
  box-shadow: var(--vl-shadow);
}

.vle-feat > .vle-feat__body:first-child {
  grid-column: 1 / -1;
}

.vle-feat__icon.vl-card__icon {
  width: 40px;
  height: 40px;
  margin: 0;
}

.vle-feat__icon svg {
  width: 18px;
  height: 18px;
}

.vle-feat__no {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--vl-tint);
  color: var(--vl-teal);
  font: 800 12px/1 var(--vl-display);
  letter-spacing: .08em;
}

.vle-feat__body {
  min-width: 0;
}

.vle-feat__chip {
  margin-bottom: 8px;
}

/* "Coming soon" above the name (2026-10-06) */
.vle-feat__soon {
  margin-bottom: 8px;
}

.vle-feat__name {
  margin: 0 0 4px;
  font: 700 17px/1.3 var(--vl-display);
  color: var(--vl-head);
}

/* the name is a button when the row opens a pop-up */
.vle-feat__btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.vle-feat__btn > span {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color .15s ease;
}

.vle-feat__btn svg {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: var(--vl-tint);
  color: var(--vl-teal);
  transition: background-color .15s ease, color .15s ease;
}

.vle-feat__btn:hover > span,
.vle-feat__btn:focus-visible > span {
  text-decoration-color: var(--vl-teal);
}

.vle-feat__btn:hover svg,
.vle-feat__btn:focus-visible svg {
  background: var(--vl-teal);
  color: var(--vl-white);
}

.vl .vle-feat__btn:focus-visible,
.vl .vle-more:focus-visible {
  outline: 3px solid var(--vl-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.vle-feat__line {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--vl-body);
}

.vle-feat__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 10px;
}

.vle-feat__via {
  margin: 0;
}

/* a text button that opens a pop-up ("See the nine carriers") */
.vle-more {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 14px/1.3 var(--vl-text);
  color: var(--vl-teal);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color .15s ease;
}

.vle-more:hover,
.vle-more:focus-visible {
  text-decoration-color: currentColor;
}

.vle-more svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.vle-more--btn {
  text-decoration: none;
}

/* ---------- the per-item roadmap tag: "Coming soon" ---------- */
.vle-soon {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  padding: 4px 10px 4px 9px;
  border-radius: 999px;
  background: var(--vle-pill-bg);
  font: 700 11.5px/1.4 var(--vl-text);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vl-head);
}

/* ---------- pop-ups: the site's .viv-modal, with a head (title, lead, tag) ---------- */
.vle-modal {
  text-align: left;
  align-items: stretch;
}

.vle-modal__head {
  padding-right: 40px;
  margin-bottom: 22px;
}

.vle-modal__title {
  margin: 0 0 6px;
  font: 800 26px/1.2 var(--vl-display);
  color: var(--vl-head);
  outline: none;
}

.vle-modal__title:focus-visible {
  outline: 3px solid var(--vl-ink);
  outline-offset: 4px;
}

.vle-modal__lead {
  margin: 0 0 12px;
  font: 500 14.5px/1.5 var(--vl-text);
  color: var(--vl-muted);
}

.vle-modal__body .vle-moment {
  align-items: start;
}

.vle-modal__body .vle-moment .vl-p {
  font-size: 15.5px;
}

.vle-modal__body .vle-scroll {
  box-shadow: none;
}

.vle-modal__body .vl-foot,
.vle-modal__body .vle-draft {
  margin-top: 16px;
  text-align: left;
}

/* the LMS pop-up: the diagram, then the three ways to run it */
.vle-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.vle-mode .vl-h3 {
  font-size: 17px;
  margin: 8px 0 6px;
}

.vle-mode .vl-p {
  margin: 0;
  font-size: 14.5px;
}

/* without JS every pop-up reads in place, as a bordered block after its list */
.vle-tabs:not(.vle-tabs--js) .viv-modal {
  display: block;
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  z-index: auto;
  margin-top: 24px;
}

.vle-tabs:not(.vle-tabs--js) .viv-modal__wrapper {
  display: block;
  height: auto;
  padding: 0;
}

.vle-tabs:not(.vle-tabs--js) .viv-modal__container {
  display: block;
  max-width: none;
  max-height: none;
  padding: 32px;
  border: 1px solid var(--vl-line);
  box-shadow: var(--vl-shadow);
}

.vle-tabs:not(.vle-tabs--js) .viv-modal__content {
  max-height: none;
  overflow: visible;
}

.vle-tabs:not(.vle-tabs--js) .viv-modal .close-button,
.vle-tabs:not(.vle-tabs--js) .viv-modal__background,
.vle-tabs:not(.vle-tabs--js) .vle-more,
.vle-tabs:not(.vle-tabs--js) .vle-feat__btn svg {
  display: none;
}

.vle-tabs:not(.vle-tabs--js) .vle-feat__btn {
  pointer-events: none;
}

/* ---------- plans: three tier cards; the ledger lives in the pop-up ---------- */
.vle-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.vle-tier-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--vl-white);
  border: 1px solid var(--vl-line);
  border-radius: var(--vl-radius);
  padding: 28px;
  box-shadow: var(--vl-shadow);
}

.vle-tier-card--premium {
  background: #EEF7F7;
  border-color: #CFE6E6;
}

.vle-tier-card .vle-tier-price {
  margin-bottom: 16px;
}

.vle-tier-card__plus {
  margin: 0 0 6px;
  font: 700 11.5px/1.4 var(--vl-text);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vl-muted);
}

.vle-tier-card__list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 7px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--vl-body);
  align-self: stretch;
  flex: 1;
}

.vle-tier-card__list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.vle-tier-card__list svg {
  width: 18px;
  height: 18px;
  color: var(--vl-good);
  margin-top: 1px;
}

.vle-tier-card .vle-soon {
  margin-bottom: 14px;
}

.vle-tier-card .vl-btn {
  align-self: stretch;
  justify-content: center;
}

.vle-compare {
  text-align: center;
  margin-top: 28px;
}

.vle-compare .vle-draft {
  margin-top: 16px;
}

/* ---------- responsive ---------- */
@media screen and (max-width: 1234px) {
  .vle-steps5 { grid-template-columns: repeat(3, 1fr); }
  .vle-float--reimb { right: 0; }
  .vle-float--alert { left: 0; }
}

@media screen and (max-width: 992px) {
  .vle-recog,
  .vle-moment,
  .vle-moment--ehr,
  .vle-flow { grid-template-columns: 1fr; }
  .vle-today { grid-template-columns: 1fr 1fr; }
  .vle-feats--3,
  .vle-tiers,
  .vle-modes { grid-template-columns: 1fr; }
  .vle-moment { gap: 28px; }
  .vle-moments { margin-top: 40px; }
  .vle-recog { gap: 32px; }
  .vle-panel > .vl-section { padding: 38px 0; }
  .vle-h2--sub { font-size: 26px; }
  .vle-flow { gap: 18px; }
  .vle-flow__arrow { display: none; }
  .vle-flow__chip { position: static; transform: none; display: inline-block; margin: 6px 0; }
  .vle-flow__lbl { margin: 0; }
  .vle-steps5 { grid-template-columns: 1fr 1fr; }
  .vle-hero-mock .vle-float {
    position: static;
    max-width: none;
    margin-top: 14px;
    box-shadow: var(--vl-shadow);
  }
  .vle-floats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}

@media screen and (max-width: 768px) {
  /* the strip becomes a row of pills that scrolls sideways, fading at the edges */
  .vle-strip { border-bottom: 0; box-shadow: 0 1px 0 var(--vl-line); }
  .vle-strip::before,
  .vle-strip::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
  }
  .vle-strip::before { left: 0; background: linear-gradient(90deg, var(--vl-white) 30%, rgba(255, 255, 255, 0)); }
  .vle-strip::after { right: 0; background: linear-gradient(270deg, var(--vl-white) 30%, rgba(255, 255, 255, 0)); }
  .vle-strip.is-scrolled::before,
  .vle-strip.is-scrollable::after { opacity: 1; }
  .vle-tablist { justify-content: flex-start; gap: 8px; margin: 0 -20px; padding: 12px 20px; scroll-padding: 0 20px; }
  .vle-tab {
    padding: 9px 16px;
    border: 1px solid var(--vl-line);
    border-radius: 999px;
    font-size: 14px;
    color: var(--vl-body);
  }
  .vle-tab::after { display: none; }
  .vle-tab[aria-selected="true"] { background: var(--vl-tint); border-color: var(--vl-tint); color: var(--vl-chip-ink); }
  .vl .vle-tab:focus-visible { outline-offset: 2px; }
  .vle-panel > .vl-section { padding: 28px 0; }
  .vle-panel > .vl-band { padding: 32px 0; }
  .vle-panel .vl-head { margin-bottom: 18px; }
  .vle-today__item { padding: 16px; }
  /* the hero mock's rows stack at this width; keep them from doubling in height */
  .vle-row { padding: 8px 0; gap: 6px; }
  .vle-row__name small { font-size: 11px; }
  .vle-dash__head { margin-bottom: 4px; }
  .vle-today,
  .vle-feats--2 { grid-template-columns: 1fr; }
  .vle-feat { padding: 16px; gap: 12px; }
  .vle-moments { margin-top: 36px; }
  .vle-modal__title { font-size: 22px; }
  .vle-modal__head { padding-right: 32px; }
  .vle-tabs:not(.vle-tabs--js) .viv-modal__container { padding: 20px 16px; }
  .vle-tier-card { padding: 22px; }
  .vle-h2--sub { font-size: 24px; }
  .vle-dash { padding: 18px 18px 12px; }
  .vle-pill--tab { white-space: normal; text-align: center; max-width: calc(100% - 24px); }
  .vle-row { grid-template-columns: minmax(0, 1fr) auto; }
  .vle-row > :nth-child(2) { grid-column: 1 / -1; }
  .vle-req { grid-template-columns: minmax(0, 1fr) auto; }
  .vle-req__when { display: none; }
  .vle-floats { grid-template-columns: 1fr; }
  .vle-live { margin-top: 28px; font-size: 14.5px; }
  .vle-stage .vle-mock { margin: -60px 0 0; max-width: 100%; }
  .vle-mock__body { padding: 14px 16px 10px; }
  .vle-phone { width: 300px; }
  .vle-note { position: static; max-width: none; margin: 14px 0 0; box-shadow: var(--vl-shadow); }
  .vle-phonewrap { flex-direction: column; align-items: center; padding-bottom: 0; }
  .vle-ehr__cols { grid-template-columns: 1fr; }
  .vle-cme { position: static; width: auto; min-width: 0; margin: 0 14px 14px; box-shadow: var(--vl-shadow); }
  .vle-ehr { min-height: 0; }
  .vle-g-axis { margin-left: 92px; }
  .vle-g-overlay { left: 92px; }
  .vle-g-row { grid-template-columns: 92px minmax(0, 1fr); }
  .vle-hint { display: flex; }
  .vle-table { min-width: 620px; font-size: 13.5px; }
  .vle-table th, .vle-table td { padding: 12px 12px; }
  .vle-ledger { min-width: 600px; }
  .vle-ledger thead th { padding: 16px 12px; }
  .vle-ledger .feat { width: 42%; }
  .vle-ledger td.val { width: 19%; }
  .vle-tier-name { font-size: 17px; }
  .vle-tier-price { font-size: 12px; margin-bottom: 10px; }
  .vle-ledger .vl-btn { padding: 8px 10px; font-size: 12.5px; }
  .vle-ledger .group td { padding: 20px 12px 6px; font-size: 10.5px; }
  .vle-cta-row { flex-direction: column; align-items: stretch; }
  .vle-cta-row .vl-btn { width: 100%; }
  .vle-steps5 { grid-template-columns: 1fr; }
  .vle-steps5 .vl-step { padding: 26px 22px 26px 84px; }
  .vle-moment .vl-h3 { font-size: 21px; }
}

@media screen and (max-width: 480px) {
  .vle-soon { font-size: 11px; letter-spacing: .02em; }
  .vle-phone { width: 100%; border-width: 7px; border-radius: 30px; }
  .vle-ph-field .k { min-width: 40px; }
  .vle-g-axis { margin-left: 80px; }
  .vle-g-overlay { left: 80px; }
  .vle-g-row { grid-template-columns: 80px minmax(0, 1fr); }
}

/* ---------- #1427: BMC barriers figure ---------- */
.vle-brrs {
  margin: 0;
  padding: 18px 20px 14px;
  background: var(--vl-white);
  border: 1px solid var(--vl-line);
  border-radius: var(--vl-radius);
  box-shadow: var(--vl-shadow);
}

.vle-brrs__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--vl-line);
}

.vle-brrs__t {
  font: 700 17px/1.3 var(--vl-display);
  color: var(--vl-head);
}

.vle-brrs__src {
  font-size: 12.5px;
  color: var(--vl-muted);
}

.vle-brrs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.vle-brr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  align-items: center;
}

.vle-brr__lab {
  grid-column: 1;
  font-size: 14px;
  color: var(--vl-muted);
}

.vle-brr.is-ours .vle-brr__lab {
  color: var(--vl-head);
  font-weight: 600;
}

.vle-brr__mark {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-wash, #E6F4F4);
  color: var(--vl-accent-ink, #0A5C5F);
  font: 700 10.5px/1.5 var(--vl-text);
  letter-spacing: .05em;
  text-transform: uppercase;
  vertical-align: 1px;
}

.vle-brr__pct {
  grid-column: 2;
  grid-row: 2;
  font: 700 14px/1 var(--vl-display);
  color: var(--vl-muted);
  font-variant-numeric: tabular-nums;
}

.vle-brr.is-ours .vle-brr__pct {
  color: var(--vl-head);
}

.vle-brr__track {
  grid-column: 1;
  grid-row: 2;
  height: 10px;
  border-radius: 999px;
  background: var(--color-bg, #F2F5F5);
  overflow: hidden;
}

.vle-brr__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #8A9099;
}

.vle-brr.is-ours .vle-brr__fill {
  background: var(--vl-teal, #0D7377);
}

.vle-brrs__read {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--vl-body);
}

.vle-brrs .vl-foot {
  margin-top: 12px;
}

@media (max-width: 560px) {
  .vle-brrs {
    padding: 20px 18px 16px;
  }

  .vle-brr__mark {
    margin-left: 6px;
  }
}

/* #1427: the one roadmap half of an otherwise live-today card */
.vle-today__soon {
  margin-top: 12px;
}

/* #1442 — the BMC citation behind a summary line; the figure and its numbers stay in place */
.vle-brrs__cite {
  margin-top: 10px;
}

.vle-brrs__cite > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 12.5px/1.4 var(--vl-text);
  color: var(--vl-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vle-brrs__cite > summary::-webkit-details-marker {
  display: none;
}

.vle-brrs__cite > summary::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.vle-brrs__cite[open] > summary::before {
  transform: translateY(1px) rotate(-135deg);
}

.vle-brrs__cite .vl-foot {
  margin-top: 8px;
}

/* #1442 — the hero mock's window bar must never set the column's min width: the URL truncates,
   and below 700px it steps aside so the roadmap pill has the room to wrap */
.vle-hero-mock .vl-panel__url {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vle-hero-mock .vle-pill--bar {
  flex: 0 0 auto;
}

/* the pill rides the mock's white window bar, not the navy band, so it keeps the
   light-ground colours .vl-hero .vle-pill would otherwise flip to white-on-white */
.vl-hero .vle-hero-mock .vle-pill--bar {
  background: var(--vle-pill-bg);
  color: var(--vl-head);
  border: 0;
}

@media screen and (max-width: 700px) {
  .vle-hero-mock .vl-panel__url {
    display: none;
  }

  .vle-hero-mock .vle-pill--bar {
    margin-left: 10px;
    white-space: normal;
    text-align: left;
  }
}