/* ============================================================
   Clinically AI — LEAN build layer (v5.0-lean)
   Loads AFTER style.css and alt.css.

   Responsibilities:
     1) force dark-only (no toggle in this build)
     2) the roadmap hero (gradient rebuilt from banner-5a, no bitmap)
     3) the 8-product roadmap grid + product marks
     4) the DNA substrate band
     5) trimmed-page helpers
   ============================================================ */

/* ---------- 1. Dark only ---------- */
/* data-theme="dark" is hard-set on <html>; the toggle is removed from markup.
   These rules are belt-and-braces so a stray toggle can never light-mode the build. */
.theme-toggle-wrap,
.theme-toggle { display: none !important; }

:root {
  /* hero gradient stops, sampled directly from Bryant's banner-5a render */
  --h0: #15132f;
  --h1: #191640;
  --h2: #1f1a4c;
  --h3: #281f5d;
  --h4: #342470;
  --h5: #422a86;
  --h6: #503098;
  --h7: #4a2a86;
  --bloom: 138, 62, 186;      /* deep violet bottom-centre bloom */
  --glass: rgba(255, 255, 255, .10);
  --glass-line: rgba(255, 255, 255, .22);
  --glass-line-hi: rgba(255, 255, 255, .42);
}

/* ---------- 2. Roadmap hero ---------- */
.lhero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  padding: 54px 0 84px;
  /* Base vertical gradient. Resolves INTO the page background at 100% so the
     hero has no bitmap edge and no hard seam against the body — the v4.6
     background-position lesson, taken one step further: no image at all. */
  background:
    radial-gradient(120% 60% at 50% 106%,
      rgba(var(--bloom), .62) 0%,
      rgba(var(--bloom), .34) 28%,
      rgba(96, 44, 156, .24) 48%,
      rgba(96, 44, 156, 0) 72%),
    linear-gradient(180deg,
      var(--h0) 0%, var(--h0) 42%, var(--h1) 54%, var(--h2) 62%,
      var(--h3) 70%, var(--h4) 78%, var(--h5) 85%,
      var(--h6) 92%, var(--h7) 97%, #150726 100%);
}
/* soft vignette so the bloom reads as light, not as a band */
.lhero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(78% 96% at 50% 42%, transparent 46%, rgba(12, 5, 26, .34) 100%);
}
.lhero > .container { position: relative; z-index: 3; }

/* the wave current — JS-drawn SVG, same generator as banner-5a */
.lhero-waves {
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -4px;
  width: 104%;
  height: clamp(230px, 36vh, 400px);
  z-index: 1;
  opacity: .62;
  pointer-events: none;
}

.lhero-head { max-width: 60rem; margin: 0 auto 30px; text-align: center; }
.lhero h1 {
  margin: 0 0 14px;
  font-size: clamp(1.95rem, 4.1vw, 3.05rem);
  line-height: 1.14;
  letter-spacing: -.015em;
  text-wrap: balance;
  /* gradient display heading, matching alt.css's warm treatment on dark surfaces */
  background: var(--text-grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-bottom: .06em;
  transform: translateZ(0);   /* keeps Chromium from painting clip-text solid */
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .lhero h1 { color: #fff; -webkit-text-fill-color: #fff; }
}
.lhero .lhero-lead {
  margin: 0 auto;
  max-width: 62ch;
  color: rgba(255, 255, 255, .86);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.55;
}
.lhero-cta { margin-top: 26px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- 3. The roadmap grid ---------- */
.rmap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  position: relative;
  z-index: 3;
}
.rmap-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  padding: 16px 12px 14px;
  min-height: 138px;
  border-radius: 16px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-decoration: none;
  color: #fff;
  text-align: center;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1),
              background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
/* alt.css sets [data-theme="dark"] a{color:#E7A6EE}, which outranks a bare
   .rmap-tile rule — so the tile's own colour has to be stated at the same
   specificity or the product names inherit link-pink. */
[data-theme="dark"] a.rmap-tile,
[data-theme="dark"] a.rmap-tile:hover { color: #fff; }

.rmap-tile:hover,
.rmap-tile:focus-visible {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, .16);
  border-color: var(--glass-line-hi);
  box-shadow: 0 14px 30px rgba(12, 5, 26, .34);
  text-decoration: none;
}
.rmap-mark { width: 46px; height: 46px; flex: none; }
.rmap-mark svg { width: 100%; height: 100%; display: block; }
.rmap-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-top: 4px;
  white-space: nowrap;
}
.rmap-tag {
  font-family: var(--font-body);
  padding-bottom: 8px;
  font-size: .78rem;
  line-height: 1.28;
  color: rgba(255, 255, 255, .88);
  max-width: 15ch;
}
/* status is real roadmap information, so it is encoded, not decorative */
.rmap-status {
  margin-top: auto;   /* chips align on one baseline regardless of tag wrap */
  font-family: var(--font-body);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.rmap-status--available { background: rgba(255, 255, 255, .92); color: #3b1c4a; }
.rmap-status--launching {
  background: rgba(255, 255, 255, .10);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .5);
}
.rmap-legend {
  margin: 20px auto 0;
  display: flex;
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: .84rem;
  color: rgba(255, 255, 255, .8);
  position: relative;
  z-index: 3;
}
.rmap-legend span { display: inline-flex; align-items: center; gap: 8px; }
.rmap-legend i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.rmap-legend .lg-a { background: #fff; }
.rmap-legend .lg-b { background: transparent; border: 1.5px solid rgba(255, 255, 255, .7); }
.rmap-legend .lg-c { background: linear-gradient(90deg, #FFBB51, #EF8819); }

/* mark entry draw — one orchestrated page-load sequence, then still */
@media (prefers-reduced-motion: no-preference) {
  /* :not(.mark-hover) keeps the entry draw and the hover pull-back from
     competing in the cascade — they are mutually exclusive states, so
     neither needs to out-specify the other. */
  .rmap-tile:not(.mark-hover) .rmap-mark .mk-s {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: markDraw .9s cubic-bezier(.5, 0, .3, 1) forwards;
    animation-delay: calc(var(--i, 0) * 90ms + 260ms);
  }
  .rmap-tile .rmap-mark .mk-d {
    opacity: 0;
    animation: markDot .4s ease forwards;
    animation-delay: calc(var(--i, 0) * 90ms + 900ms);
  }
  @keyframes markDraw { to { stroke-dashoffset: 0; } }
  @keyframes markDot  { to { opacity: 1; } }
}

/* ---------- 4. DNA substrate band ---------- */
.dnaband {
  position: relative;
  padding: 84px 0;
  background:
    radial-gradient(64% 48% at 50% 0%, rgba(231, 70, 178, .16), transparent 68%),
    var(--bg);
  overflow: hidden;
}
.dnaband-grid {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 48px;
  align-items: center;
}
.dnaband-mark {
  width: 100%;
  max-width: 210px;
  filter: drop-shadow(0 0 26px rgba(199, 88, 224, .38));
}
.dnaband-mark svg { width: 100%; height: auto; display: block; }
.dnaband h2 { margin-top: 0; }
/* The DNA band is a dark surface and .dnaband is not a .section, so it never
   picked up a gradient heading. --text-grad-hero runs the same orange → pink →
   purple → blue ramp as the helix beside it, which is the point of the band. */
.dnaband h2 {
  background-image: var(--text-grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-bottom: .06em;
  transform: translateZ(0);   /* keeps Chromium from painting clip-text solid */
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .dnaband h2 { color: #F1E9F7; -webkit-text-fill-color: #F1E9F7; }
}
.dnaband .lead { max-width: 58ch; }
.dnaband-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 26px;
}
.dnaband-list li {
  position: relative;
  padding-left: 22px;
  color: rgba(241, 233, 247, .8);
  font-size: .97rem;
}
.dnaband-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--grad-brand);
}
@media (prefers-reduced-motion: no-preference) {
  .dnaband-mark svg { animation: dnaTurn 14s linear infinite; transform-origin: 50% 50%; }
  @keyframes dnaTurn { to { transform: rotate(360deg); } }
}

/* ---------- 5. Product detail rows (products.html) ---------- */
.prow { padding: 0 0 6px; }
.prow-item {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 30px;
  align-items: start;
  padding: 34px 0;
  border-top: 1px solid var(--line);
}
.prow-item:first-child { border-top: 0; }
.prow-mark {
  width: 92px;
  height: 92px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
}
.prow-mark svg { width: 62px; height: 62px; }
.prow-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.prow-head h3 { margin: 0; font-size: 1.42rem; color: var(--plum); }
.prow-role { font-size: .84rem; color: var(--muted); font-weight: 600; }
.prow-body { color: rgba(241, 233, 247, .78); max-width: 68ch; margin: 0 0 12px; }
.prow-bul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.prow-bul li {
  font-size: .82rem;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  color: rgba(241, 233, 247, .82);
}
/* On a phone these pills wrap to two or three lines inside a symmetric
   capsule, and left-aligned text in a symmetric shape reads as a mistake.
   Scoped to the widths where they actually wrap; on desktop they are
   single-line and centring would be a no-op either way. */
@media (max-width: 720px) {
  .prow-bul li { text-align: center; }
}
.prow-status {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.prow-status--available { background: var(--grad-brand); color: #fff; }
.prow-status--launching {
  border: 1px solid rgba(255, 255, 255, .38);
  color: rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .07);
}

/* ---------- 6. Small shared pieces ---------- */
.lean-quote { margin: 0 auto; max-width: 46rem; text-align: center; }
.lean-quote blockquote {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  line-height: 1.38;
  color: #F3ECF7;
}
.lean-quote cite { font-style: normal; color: var(--muted); font-size: .92rem; }

.lean-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin-top: 8px;
}
.lean-strip span {
  font-size: .8rem;
  letter-spacing: .04em;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .9);
}

/* ---------- 7. Responsive ---------- */
@media (max-width: 1080px) {
  .rmap { gap: 10px; }
  .rmap-tile { min-height: 130px; padding: 14px 8px 12px; }
  .rmap-tag { font-size: .73rem; }
}
@media (max-width: 900px) {
  .rmap { grid-template-columns: repeat(2, 1fr); }
  .lhero { padding: 44px 0 70px; }
  .dnaband-grid { grid-template-columns: 1fr; gap: 28px; }
  .dnaband-mark { max-width: 148px; }
  .dnaband-list { grid-template-columns: 1fr; }
  .prow-item { grid-template-columns: 72px 1fr; gap: 20px; }
  .prow-mark { width: 66px; height: 66px; border-radius: 14px; }
  .prow-mark svg { width: 44px; height: 44px; }
  /* the wave current would sit behind the tiles on narrow screens — pull it down */
  .lhero-waves { height: 190px; opacity: .38; }
}
@media (max-width: 560px) {
  .rmap { gap: 8px; }
  .rmap-tile { min-height: 124px; }
  .rmap-name { font-size: .68rem; }
  .rmap-mark { width: 38px; height: 38px; }
  .lhero-cta .btn { width: 100%; text-align: center; }
}

/* ---------- 8. Quality floor ---------- */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid #FFBB51;
  outline-offset: 3px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  /* The wave field is still drawn, just not animated — lean-hover.js renders
     one static frame. Reduced motion means no movement, not no graphic. */
  .lhero-waves { opacity: .5; }
  .rmap-tile { transition: none; }
  .rmap-tile:hover { transform: none; }
}

/* ---------- 9. Careers callouts ---------- */
/* Full band — about.html and any page where careers deserves real weight. */
.hiring .hiring-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 44px;
  align-items: center;
}
.hiring h2 { margin-top: 0; }
.hiring .lead { max-width: 56ch; margin-bottom: 0; }
.hiring-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.hiring-cta .btn { text-align: center; }

/* Slim strip — homepage stays product-led, so careers is present but quiet. */
.hiring-strip {
  padding: 22px 0;
  background: var(--bg-tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hiring-strip-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  flex-wrap: wrap;
}
.hiring-strip p {
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
}
.hiring-strip-links {
  display: inline-flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
}
.hiring-strip-links a {
  font-weight: 700;
  font-size: .96rem;
  color: var(--purple);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.hiring-strip-links a:hover,
.hiring-strip-links a:focus-visible {
  text-decoration: none;
  border-bottom-color: currentColor;
}

@media (max-width: 900px) {
  .hiring .hiring-grid { grid-template-columns: 1fr; gap: 26px; }
  .hiring-cta { flex-direction: row; flex-wrap: wrap; }
  .hiring-cta .btn { flex: 1 1 auto; }
  .hiring-strip-in { flex-direction: column; align-items: flex-start; }
}

/* ---------- 10. Brand logo sizing ----------
   The real asset (329x90) puts a full-height mark next to the wordmark, so at
   style.css's 38px cap the wordmark reads noticeably smaller than a text-only
   logo would at the same height. Given a 74px nav, a little more room balances
   it without crowding. width stays auto, so the ratio is never forced. */
.site-header .brand img { max-height: 46px; }
.foot-brand .brand img { max-height: 48px; }
@media (max-width: 560px) {
  .site-header .brand img { max-height: 38px; }
}

/* ============================================================
   11. NAVIGATION — lighter weight, all caps
   ============================================================ */
.nav-menu > li > a {
  font-family: var(--font-body);
  font-weight: 400;              /* was 600/700 via inherited nav styling */
  font-size: .78rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  transition: color .18s ease;
}
.nav-menu > li > a:hover,
.nav-menu > li > a:focus-visible {
  color: #fff;
  text-decoration: none;
}
[data-theme="dark"] .nav-menu > li > a { color: rgba(255, 255, 255, .82); }
[data-theme="dark"] .nav-menu > li > a:hover { color: #fff; }
.nav-actions .login {
  font-family: var(--font-body);
  /* same treatment as the footer careers link: slightly bold, gradient fill.
     background-IMAGE, never the shorthand — the shorthand resets
     background-clip and paints a solid block with invisible letters. */
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  background-image: linear-gradient(90deg, #FFD79A 0%, #FFBB51 38%,
                                    #F58A3C 72%, #FF6FA8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: filter .18s ease;
}
[data-theme="dark"] .nav-actions .login {
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.nav-actions .login:hover,
.nav-actions .login:focus-visible {
  filter: brightness(1.15);
  text-decoration: none;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .nav-actions .login,
  [data-theme="dark"] .nav-actions .login {
    color: #FFBB51;
    -webkit-text-fill-color: #FFBB51;
    background-image: none;
  }
}
.nav-menu { gap: 26px; }
@media (max-width: 1180px) { .nav-menu { gap: 18px; } .nav-menu > li > a { letter-spacing: .07em; } }

/* ============================================================
   12. PRODUCT MARK HOVER
   The design system's own hover state: every stroke pulls back a
   little and settles. .mark-hover is set by lean-motion.js so it
   never collides with the page-load draw-in.
   ============================================================ */
@keyframes markPullBack {
  0%, 100% { stroke-dashoffset: 0; }
  50%      { stroke-dashoffset: 12; }
}
@media (prefers-reduced-motion: no-preference) {
  .rmap-tile.mark-hover .rmap-mark .mk-s {
    stroke-dasharray: 100;
    animation: markPullBack 1.6s ease-in-out infinite;
  }
  /* the solid accent dot lifts with the stroke */
  .rmap-tile .rmap-mark .mk-d { transition: transform .3s ease; }
  .rmap-tile.mark-hover .rmap-mark { transform: scale(1.06); }
  .rmap-mark { transition: transform .28s cubic-bezier(.4, 0, .2, 1); }
}

/* ============================================================
   13. MOOD SECTIONS — photo + semi-opaque purple/orange scrims
   Every band takes a background image and one of three tinted
   overlays. Swap the image with --img; the scrim stays consistent.
   ============================================================ */
.mood {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 96px 0;
  color: #fff;
}
.mood-bg {
  position: absolute;
  inset: -12% 0;
  z-index: 0;
  background-image: var(--img);
  background-size: cover;
  /* background-position, never transform:scale — a scaled bitmap can
     expose its own edge, which is what bit the v4.6 hero. */
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #241033;
  will-change: transform;
}
.mood-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* purple — the default enterprise mood */
.mood--purple .mood-scrim {
  background:
    linear-gradient(180deg, rgba(20, 8, 40, .70) 0%, rgba(32, 12, 58, .46) 50%, rgba(20, 8, 40, .78) 100%),
    radial-gradient(80% 60% at 22% 30%, rgba(148, 78, 226, .40), transparent 72%);
}
/* orange — warmth, used for people/careers/outcome bands */
.mood--orange .mood-scrim {
  background:
    linear-gradient(180deg, rgba(38, 14, 26, .68) 0%, rgba(58, 22, 20, .42) 48%, rgba(26, 8, 32, .80) 100%),
    radial-gradient(78% 62% at 74% 34%, rgba(239, 136, 25, .40), transparent 74%);
}
/* duotone — purple into orange, for the widest full-bleed bands */
.mood--duo .mood-scrim {
  background:
    linear-gradient(115deg, rgba(20, 8, 40, .76) 0%, rgba(58, 23, 69, .52) 42%, rgba(120, 50, 40, .40) 78%, rgba(26, 8, 32, .74) 100%),
    radial-gradient(60% 70% at 84% 70%, rgba(239, 136, 25, .34), transparent 72%);
}
.mood > .container { position: relative; z-index: 2; }
.mood h2 {
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: none;
  text-shadow: 0 3px 26px rgba(0, 0, 0, .5);
  margin-top: 0;
}
.mood .lead, .mood p { color: rgba(255, 255, 255, .9); }
.mood--tall { padding: 104px 0; }
.mood--center { text-align: center; }
.mood--center .lead { margin-left: auto; margin-right: auto; }

/* subpage hero over a photo */
.lhero--photo .lhero-bg {
  position: absolute;
  inset: -10% 0;
  z-index: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center 32%;
  background-color: #241033;
}
.lhero--photo .lhero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14, 4, 32, .86) 0%, rgba(26, 10, 48, .66) 46%, rgba(26, 8, 48, .94) 100%),
    radial-gradient(70% 60% at 26% 24%, rgba(160, 70, 219, .38), transparent 72%);
}
.lhero--photo { padding: 92px 0 78px; background: #1a0830; }
.lhero--photo .lhero-head { text-align: left; margin-left: 0; max-width: 46rem; }
.lhero--photo .lhero-lead { margin-left: 0; }

@media (max-width: 900px) {
  .mood { padding: 68px 0; }
  .mood--tall { padding: 84px 0; }
  .lhero--photo { padding: 64px 0 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .mood-bg { inset: 0; transform: none !important; }
}

/* ---------- 14. Third status tier + roadmap build order ---------- */
.rmap-status--rolling {
  background: var(--grad-cta);
  color: #3a1f04;
}
.rmap-status--roadmap {
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .42);
}
.prow-status--rolling { background: var(--grad-cta); color: #3a1f04; }
.prow-status--roadmap {
  border: 1px solid rgba(255, 255, 255, .38);
  color: rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .07);
}
/* build-order badge — numbering is justified here because the roadmap
   genuinely is a sequence, not a decorative list */
.prow-mark { position: relative; }
.prow-seq {
  position: absolute;
  top: -9px;
  left: -9px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .78rem;
  color: #fff;
  background: var(--grad-brand);
  box-shadow: 0 4px 12px rgba(8, 3, 18, .5);
}
.rmap-legend { gap: 18px; }

/* ============================================================
   15. v8 review notes
   ============================================================ */

/* --- 10px breathing room under badge pills in card grids ---
   Covers both the numbered "five things" cards (01–05) and the
   Map / Ask / Verify cards; both use <span class="pill"> + <h3>. */
.card .pill + h3 { margin-top: 10px; }

/* --- taller claim band (About) --- */
.pbh--taller {
  min-height: calc(clamp(300px, 38vh, 430px) + 150px);
  padding: 35px 0;
}

/* --- centred data-viz claim band (Platform) --- */
.mood--dviz { padding: 92px 0; }
.mood--dviz .container { max-width: 900px; }
.mood--dviz h2 { margin-bottom: 14px; }
.mood--dviz .lead { max-width: 60ch; }

/* ============================================================
   16. Navigation — deep purple gradient over black, PRODUCTS menu
   ============================================================ */
.site-header {
  position: sticky;
  background: #0a0414;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Purple lives on its own layer so its opacity can be scrubbed with scroll.
   style.css's .site-header.scrolled rule repaints the background outright,
   which is why a background-image gradient vanished the moment main.js added
   .scrolled at 20px. --nav-purple is set by lean-hover.js: 1 at the top of the
   page, 0 once past the fold, and back again on the way up. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--nav-purple, 1);
  transition: opacity .25s linear;
  background:
    linear-gradient(90deg,
      rgba(124, 46, 168, .72) 0%,
      rgba(74, 26, 112, .40) 12%,
      rgba(10, 4, 20, 0) 34%,
      rgba(10, 4, 20, 0) 66%,
      rgba(74, 26, 112, .40) 88%,
      rgba(124, 46, 168, .72) 100%),
    radial-gradient(28% 220% at 0% 50%, rgba(168, 88, 240, .40), transparent 70%),
    radial-gradient(28% 220% at 100% 50%, rgba(221, 86, 159, .34), transparent 70%);
}
.site-header > .container { position: relative; z-index: 1; }
/* keep the scrolled state from wiping the layer underneath */
.site-header.scrolled { background: rgba(14, 5, 26, .92); }

[data-theme="dark"] .site-header { background-color: #0a0414; }

/* --- products dropdown --- */
.nav-menu { position: relative; }
.has-menu { position: relative; }
/* No caret glyph on PRODUCTS. The border-drawn chevron broke out of the
   nowrap link and painted as a stray mark under the label; the submenu is
   discoverable on hover and focus without it. */

.submenu {
  position: absolute;
  top: 100%;
  left: -14px;
  min-width: 268px;
  margin: 0;
  padding: 10px;
  list-style: none;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(38, 14, 62, .98), rgba(16, 6, 30, .99));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 26px 54px rgba(6, 2, 16, .62);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 90;
}
.has-menu:hover > .submenu,
.has-menu:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.submenu li { margin: 0; }
.submenu a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 10px;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .9rem;
  letter-spacing: .01em;
  text-transform: none;
  color: rgba(255, 255, 255, .88);
  transition: background .16s ease, color .16s ease;
}
.submenu a:hover,
.submenu a:focus-visible {
  background: rgba(255, 255, 255, .09);
  color: #fff;
  text-decoration: none;
}
.submenu .sm-mark { width: 24px; height: 24px; flex: none; }
.submenu .sm-mark svg { width: 100%; height: 100%; display: block; }
.submenu .sm-tag {
  margin-left: auto;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  color: rgba(255, 255, 255, .74);
  border: 1px solid rgba(255, 255, 255, .26);
}
.submenu .sm-sep {
  height: 1px;
  margin: 8px 6px;
  background: rgba(255, 255, 255, .12);
}
.submenu .sm-all { font-weight: 700; color: #FFBB51; }

/* The caret only exists on touch widths; main.js injects it into every
   .has-menu. Hidden on desktop, where hover and focus-within already open the
   dropdown. */
.sm-toggle { display: none; }

@media (max-width: 900px) {
  /* No hover on touch, so each group becomes a disclosure inside the stacked
     menu rather than being permanently expanded. Expanding all of them made the
     menu 884px tall in an 812px viewport, and because it is absolutely
     positioned inside a sticky header, that overflow could not be scrolled to. */
  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: rgba(255, 255, 255, .04);
    border: 0;
    min-width: 0;
    margin: 6px 0 2px;
    display: none;
  }
  .has-menu.is-open > .submenu { display: block; }

  /* The parent link keeps going to its own page; the caret is its own control. */
  .nav-menu .has-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .nav-menu .has-menu > .submenu { flex: 1 0 100%; }
  .sm-toggle {
    display: grid;
    place-items: center;
    width: 44px;            /* tap-target floor */
    height: 44px;
    margin: -10px 0;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: rgba(255, 255, 255, .72);
  }
  .sm-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 8px; }
  .sm-caret {
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
  }
  .has-menu.is-open .sm-toggle { color: #fff; }
  .has-menu.is-open .sm-caret { transform: translateY(1px) rotate(-135deg); }

  /* However long a group is, the menu stays inside the viewport and scrolls
     within itself rather than off the bottom of the screen. */
  .nav-menu.open {
    max-height: calc(100vh - 74px);
    max-height: calc(100svh - 74px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* --- nav fits six items + actions without wrapping ---
   Adding For Independents pushed the bar to two lines at 1440px. Links and
   the demo button never wrap; spacing and tracking tighten as width drops. */
.nav-menu > li > a,
.nav-actions .login,
.nav-actions .btn { white-space: nowrap; }
.nav { gap: 20px; }
.nav-menu { gap: 20px; margin-left: 0; }   /* 0, not 4px: the menu is centred on the header */
.nav-menu > li > a { font-size: .82rem; letter-spacing: .075em; }
.nav-actions { gap: 16px; display: flex; align-items: center; }
.nav-actions .btn { padding: 12px 22px; font-size: .92rem; }

@media (max-width: 1400px) {
  .nav-menu { gap: 15px; }
  .nav-menu > li > a { letter-spacing: .045em; font-size: .79rem; }
  .nav-actions .btn { padding: 11px 18px; font-size: .88rem; }
}
@media (max-width: 1180px) and (min-width: 901px) {
  .nav-menu { gap: 11px; }
  .nav-menu > li > a { letter-spacing: .015em; font-size: .76rem; }
  .nav-actions .login { display: none; }   /* Login also lives in the footer */
}

/* ============================================================
   17. "A Fully Connected Suite" — 140px shorter
   The stage is bottom-aligned inside .mon, so trimming the section
   height closes the gap between the title and the device graphics
   one-for-one. Base rule is clamp(330px, calc(74vh - 300px), 460px).
   ============================================================ */
.mon { min-height: clamp(190px, calc(74vh - 440px), 320px); }
@media (max-width: 820px) {
  .mon { min-height: 455px; }
}

/* ============================================================
   18. Footer social links
   ============================================================ */
/* Footer phone. Sits between the positioning line and the social row so it
   reads as contact detail rather than another nav link. */
.foot-phone { margin: 14px 0 0; }
.foot-phone a {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .01em;
  color: #fff;
  text-decoration: none;
}
.foot-phone a:hover,
.foot-phone a:focus-visible { color: var(--orange); }

.foot-social {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.foot-social a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.foot-social a:hover,
.foot-social a:focus-visible {
  color: #fff;
  background: var(--grad-brand);
  border-color: transparent;
  transform: translateY(-2px);
  text-decoration: none;
}
.foot-social svg { width: 19px; height: 19px; display: block; }

/* The 140px comes out of the space ABOVE the devices, not the devices
   themselves: style.css gives .mon-title a 100px top margin and 40px bottom,
   and lifts the monitor 85px off the floor. Trimming those three by 80 + 20 + 40
   shortens the band by 140px without cropping either graphic. */
.mon-title { margin-top: 20px; margin-bottom: 20px; }
.mon-item--screen { margin-bottom: 45px; }
@media (max-width: 820px) {
  .mon-title { margin-top: 16px; margin-bottom: 16px; }
}

/* brighter, gradient-filled careers link in the footer */
.site-footer .foot-hiring {
  background: linear-gradient(90deg, #FFD79A 0%, #FFBB51 38%, #F58A3C 72%, #FF6FA8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .site-footer .foot-hiring { color: #FFBB51; -webkit-text-fill-color: #FFBB51; }
}
.site-footer .foot-hiring:hover { filter: brightness(1.15); text-decoration: none; }

/* ============================================================
   19. Photo-texture section strip
   Keeps .section so alt.css's gradient-h2 treatment still applies,
   and layers a photo plus a semi-opaque purple scrim beneath.
   ============================================================ */
.section--photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}
/* [data-theme="dark"] .section sets a flat background at (0,1,1), which would
   paint straight over the photo — match that specificity to opt out. */
[data-theme="dark"] .section--photo { background: transparent; }
.section--photo > .container { position: relative; z-index: 2; }
.sp-bg {
  position: absolute;
  inset: -10% 0;
  z-index: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
  background-color: #241033;
  will-change: transform;
}
.sp-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20, 8, 40, .90) 0%, rgba(38, 14, 68, .74) 46%, rgba(18, 7, 36, .92) 100%),
    radial-gradient(72% 62% at 26% 28%, rgba(148, 78, 226, .34), transparent 72%);
}
@media (prefers-reduced-motion: reduce) {
  .sp-bg { inset: 0; transform: none !important; }
}

/* ============================================================
   20. Platform: 20px of air before the org/leader/clinician/care
   scroll animation
   ============================================================ */
.tlt-section .tlt-scroll { margin-top: 20px; }

/* cards over the photo strip need a firmer backing than the flat-dark default,
   or the photograph reads through the body copy */
[data-theme="dark"] .section--photo .card {
  background: rgba(22, 9, 42, .78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(255, 255, 255, .16);
}

/* ---------- ABOUT submenu: plain text list, right-aligned ---------- */
.submenu--plain { min-width: 236px; }
.submenu--plain a { padding: 10px 12px; }
/* the About item sits near the right edge, so its panel opens inward */
.submenu--right { left: auto; right: -14px; }
.sm-ext {
  margin-left: auto;
  font-size: .8rem;
  opacity: .6;
}
.submenu a:hover .sm-ext { opacity: 1; }
/* ---- in-page anchor landing --------------------------------------------
   The header is sticky and 74px tall at every width, so any element reached
   by a fragment has to reserve that plus breathing room, or the product mark,
   name and first line of copy land underneath it. One value covers desktop and
   mobile because the header does not change height.
   Paired with the fragment-landing fix in main.js: this rule decides WHERE a
   jump lands, that decides WHETHER the jump happens at all on a cold load. */
section[id],
article[id],
.pblock,
.legal a[id],
#life { scroll-margin-top: 100px; }
@media (max-width: 900px) {
  .submenu--right { right: auto; left: 0; }
}

/* ============================================================
   21. Animated DNA — 3D ribbon that comes apart and rebuilds
   Depth-sorted filled ribbons (see products_data.dna_helix), so the
   animation works on whole pieces rather than stroke dashes. No
   gradients: fills are pre-shaded per piece at build time.
   ============================================================ */
.dnax { width: 100%; height: auto; display: block; overflow: visible; }
.dnax-piece,
.dnax-rung { transform-box: fill-box; transform-origin: center; }
.dnax-piece path { shape-rendering: geometricPrecision; }

@media (prefers-reduced-motion: no-preference) {
  /* ribbon pieces peel away from the axis, then settle back */
  .dnax-piece {
    animation: dnaxPiece 10s cubic-bezier(.45, 0, .35, 1) infinite;
    animation-delay: calc(var(--i, 0) * 90ms);
  }
  @keyframes dnaxPiece {
    0%, 20%   { opacity: 1; transform: translateX(0) scale(1); }
    40%, 54%  { opacity: 0; transform: translateX(calc(var(--i, 0) * 3px - 10px)) scale(.82); }
    76%, 100% { opacity: 1; transform: translateX(0) scale(1); }
  }

  /* base pairs scatter outward and spin, then snap back in sequence */
  .dnax-rung {
    animation: dnaxRung 10s cubic-bezier(.45, 0, .35, 1) infinite;
    animation-delay: calc(var(--i, 0) * 52ms);
  }
  @keyframes dnaxRung {
    0%, 18% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
    38%, 56% {
      opacity: 0;
      transform: translate(var(--dx, 40px), var(--dy, 0)) rotate(var(--r, 40deg)) scale(.4);
    }
    78%, 100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  }

  /* slow sway rather than a spin, so it reads as a living structure */
  .dnax-sway {
    transform-box: fill-box;
    transform-origin: center;
    animation: dnaxSway 13s ease-in-out infinite;
  }
  @keyframes dnaxSway {
    0%, 100% { transform: rotate(-6deg) scale(.98); }
    50%      { transform: rotate(6deg) scale(1.02); }
  }
}

/* the band that holds it */
.dnaband-mark { filter: drop-shadow(0 14px 34px rgba(120, 30, 160, .42)); }
.dnaband-mark .dnax { max-height: 320px; margin: 0 auto; }
.dnaband-mark svg { animation: none !important; }
@media (max-width: 900px) {
  .dnaband-mark .dnax { max-height: 210px; }
}

/* ============================================================
   22. Open-roles feed
   ============================================================ */
.jobs-feed { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.jf-row { border-bottom: 1px solid var(--line); }
.jf-row > a {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 6px;
  text-decoration: none;
  transition: background .16s ease, padding-left .16s ease;
}
.jf-row > a:hover,
.jf-row > a:focus-visible {
  background: rgba(255, 255, 255, .04);
  padding-left: 14px;
  text-decoration: none;
}
.jf-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.06rem;
  color: #F3ECF7;
  flex: 1 1 auto;
  min-width: 0;
}
.jf-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.jf-dept {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: rgba(255, 255, 255, .78);
  white-space: nowrap;
}
.jf-loc { font-size: .9rem; color: var(--muted); white-space: nowrap; }
.jf-go { color: var(--purple); font-size: 1.05rem; flex: none; }
.jf-note { margin-top: 20px; font-size: .93rem; color: var(--muted); }
@media (max-width: 720px) {
  .jf-row > a { flex-direction: column; align-items: flex-start; gap: 9px; }
  .jf-meta { justify-content: flex-start; }
  .jf-go { display: none; }
  .jf-loc { white-space: normal; }
}

/* exec-narrative kicker line */
.lean-kicker {
  margin: 34px auto 0;
  max-width: 62ch;
  text-align: center;
  font-family: var(--font-head);
  font-size: clamp(1.02rem, 1.9vw, 1.24rem);
  line-height: 1.44;
  color: #F3ECF7;
}
.mood .lean-kicker { color: #fff; }

/* ============================================================
   23. Products page depth
   ============================================================ */
.prow-item--deep { padding: 42px 0; align-items: start; }
.prow-main { min-width: 0; }
.prow-lede {
  font-family: var(--font-head);
  font-size: clamp(1.02rem, 1.7vw, 1.16rem);
  line-height: 1.46;
  color: #F0E7F6;
  max-width: 66ch;
  margin: 0 0 18px;
}
.prow-points { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.prow-points li {
  position: relative;
  padding-left: 20px;
  max-width: 74ch;
  color: rgba(241, 233, 247, .76);
  font-size: .97rem;
  line-height: 1.55;
}
.prow-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grad-brand);
}
.prow-points strong { color: #F3ECF7; font-weight: 700; }
.prow-scope {
  margin: 0 0 18px;
  padding: 12px 15px;
  border-left: 2px solid var(--purple);
  background: rgba(255, 255, 255, .04);
  border-radius: 0 10px 10px 0;
  font-size: .9rem;
  color: var(--muted);
  max-width: 72ch;
}
/* Supervise puts the scope note after the pill row (Precision puts it
   before), and the row has no bottom margin of its own. */
.prow-bul + .prow-scope { margin-top: 18px; }
.pfacts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pfact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  min-width: 128px;
}
.pfact-n {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.16rem;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.pfact-l { font-size: .78rem; color: var(--muted); line-height: 1.3; }

/* value chain: one card per product, in the site-wide product order. The
   Learn More link's ::after covers its card, so the whole card jumps to the
   product's block while the link stays the only tab stop. */
.vchain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.vchain-step {
  position: relative;
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1), background .22s ease, border-color .22s ease;
}
.vchain-step:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .26);
}
.vchain-body { display: flex; flex-direction: column; height: 100%; padding: 20px 18px; }
.vchain-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.vchain-t { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.12rem; color: #F3ECF7; }
.vchain-role { margin: 3px 0 10px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
.vchain-d { margin: 0 0 18px; font-size: .9rem; line-height: 1.5; }
/* alt.css sets [data-theme="dark"] p { color: var(--ink) }, which outranks a
   bare class, so these state their colour at the same specificity. */
[data-theme="dark"] .vchain-role { color: var(--purple); }
[data-theme="dark"] .vchain-d { color: var(--muted); }
/* No blur and no hover lift on this one: either would make the button the
   containing block for its ::after and shrink the hit area back to the pill. */
.vchain-cta {
  margin-top: auto;
  align-self: flex-start;
  padding: 9px 18px;
  font-size: .86rem;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.vchain-cta:hover { transform: none; }
.vchain-cta::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
@media (prefers-reduced-motion: reduce) {
  .vchain-step { transition: none; }
  .vchain-step:hover { transform: none; }
}

/* five layers */
/* Flex, not grid, so a short last row (five items over three columns) centers
   under the row above instead of hugging the left edge. */
.lay-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.lay-item {
  flex: 0 0 calc((100% - 32px) / 3);
  padding: 24px;
  border-radius: 16px;
  background: rgba(22, 9, 42, .74);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lay-item h3 { margin: 0 0 8px; font-size: 1.08rem; color: #F3ECF7; }
.lay-item p { margin: 0; font-size: .93rem; line-height: 1.55; color: rgba(241, 233, 247, .78); }
@media (max-width: 960px) { .lay-item { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 620px) { .lay-item { flex-basis: 100%; } }

/* minmax(0, 1fr), not 1fr: a plain 1fr column cannot shrink below its widest
   unbreakable run (the mark + status row, or an &nbsp;-joined last line), so
   on narrow phones the right-hand column used to overflow the container. */
@media (max-width: 900px) { .vchain { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 560px) {
  .vchain-body { padding: 16px 14px; }
  .vchain-t { font-size: 1rem; }
  .vchain-d { font-size: .84rem; margin-bottom: 14px; }
  .vchain-cta { padding: 8px 14px; font-size: .82rem; }
}
/* Two columns hold down to 340px (common Android widths); below that, and at
   400% zoom on a 1280px screen, one column. */
@media (max-width: 374px) {
  .vchain-body { padding: 14px 12px; }
  .vchain-top { flex-wrap: wrap; gap: 8px; }
  .vchain-d { font-size: .8rem; }
}
@media (max-width: 339px) { .vchain { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .prow-item--deep { padding: 32px 0; }
  .pfact { min-width: 0; flex: 1 1 140px; }
}

/* ============================================================
   24. Hero H1 — full brand spectrum
   The pale cream ramp read flat; this runs orange through pink and
   purple into blue, matching the mark. If you'd rather it match the
   section headings exactly, swap for var(--text-grad-cool).
   ============================================================ */
:root {
  --text-grad-hero: linear-gradient(96deg, #FFC15E 0%, #FF6FA8 26%,
                                    #D45BF0 52%, #A96CFF 74%, #6C8EFF 100%);
}
.lhero h1 {
  /* background-image, NOT the `background` shorthand: the shorthand resets
     background-clip to border-box, which un-clips the gradient from the text
     and paints it as a solid block with invisible letters on top. */
  background-image: var(--text-grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ============================================================
   25. EHR integration marquee — white strip, no pause on hover
   ============================================================ */
.ehrm {
  background: #fff;
  padding: 46px 0 40px;
  overflow: hidden;
  position: relative;
}
.ehrm-head { text-align: center; margin-bottom: 30px; }
[data-theme="dark"] .ehrm .ehrm-eyebrow {
  margin: 0 0 8px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7C42C4;
  -webkit-text-fill-color: #7C42C4;
  background-image: none;
}
[data-theme="dark"] .ehrm h2 {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-size: clamp(1.32rem, 2.5vw, 1.92rem);
  line-height: 1.24;
  color: #2A1440;
  /* the dark-mode gradient-heading treatment must not leak onto a white strip */
  background: none;
  -webkit-text-fill-color: #2A1440;
}
[data-theme="dark"] .ehrm .ehrm-sub {
  margin: 0 auto;
  max-width: 60ch;
  font-size: .98rem;
  line-height: 1.55;
  color: #4A4256;
  -webkit-text-fill-color: #4A4256;
  background-image: none;
}
.ehrm-rail + .ehrm-rail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(42, 20, 64, .09);
}
.ehrm-rail {
  position: relative;
  overflow: hidden;
  /* feather both ends so logos enter and leave instead of being cut */
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ehrm-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  padding: 8px 31px;
}
/* Each vendor gets an identical frame with the logo contained inside it. That
   is what makes 17 logos of wildly different aspect ratios read as one row
   rather than a jumble of sizes. */
.ehrm-track img[data-broken] { display: none; }
.ehrm-track img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* lightly greyed, per the brief; colour on hover like the customer strip */
  filter: grayscale(1) opacity(.62);
  transition: filter .25s ease;
}
.ehrm-item:hover img { filter: grayscale(0) opacity(1); }
@media (prefers-reduced-motion: no-preference) {
  /* The track holds two identical copies, so translating exactly -50% lands
     copy two where copy one began: a seamless loop. No pause on hover by
     design — there is deliberately no :hover rule here. */
  /* 42s read as hurried; slower makes it ambient rather than busy */
  .ehrm-track { animation: ehrmScroll 68s linear infinite; }
  /* Durations are deliberately mismatched. Equal durations make two
     counter-scrolling rows look mechanically geared to each other. */
  .ehrm-track--rev { animation: ehrmScrollRev 79s linear infinite; }
  @keyframes ehrmScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @keyframes ehrmScrollRev {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
  }
}
@media (max-width: 720px) {
  .ehrm { padding: 34px 0 30px; }
  .ehrm-track { gap: 42px; }
  .ehrm-track img { height: 27px; }
}

/* ============================================================
   26. Mobile app band
   ============================================================ */
/* The glow behind the phones (.mob-glow, section 32) is sized to halo well past
   the render, so between the two-column breakpoint and the point where the
   container stops growing it reaches past the right viewport edge and adds
   horizontal scroll. Clip on x at the section, which is full-bleed, so the cut
   lands on the viewport edge and nothing visible is lost; y stays visible so the
   halo still bleeds over the section's padding. Same treatment as .hero /
   .hero-neon in style.css — note clip-path is paint-only and would not shrink
   the scroll width, so the clip has to come from overflow. */
.mob {
  overflow-x: clip;
  overflow-y: visible;
}
.mob-grid {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: 52px;
  align-items: center;
}
.mob-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 13px; }
.mob-list li {
  position: relative;
  padding-left: 21px;
  color: rgba(241, 233, 247, .78);
  font-size: .97rem;
  line-height: 1.55;
  max-width: 60ch;
}
.mob-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grad-brand);
}
.mob-list strong { color: #F3ECF7; }
.mob-art img {
  width: 100%;
  height: auto;
  display: block;
  /* the render already carries device frames and its own shading, so it only
     needs a soft ground shadow to sit on the dark surface */
  filter: drop-shadow(0 26px 46px rgba(8, 3, 20, .55));
}
@media (max-width: 900px) {
  .mob-grid { grid-template-columns: 1fr; gap: 32px; }
  .mob-art { max-width: 420px; margin: 0 auto; }
}

/* ============================================================
   27. Enterprise oversight band
   ============================================================ */
.over-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.over-art img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 56px rgba(8, 3, 20, .5);
}
@media (max-width: 900px) { .over-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ============================================================
   28. Testimonial band
   ============================================================ */
.quoteband { padding: 74px 0; }
.quoteband-in { margin: 0 auto; max-width: 52rem; text-align: center; }
.quoteband blockquote {
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-size: clamp(1.22rem, 2.5vw, 1.72rem);
  line-height: 1.4;
  color: #F3ECF7;
}
.quoteband figcaption {
  font-size: .94rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================================
   29. Executive team — nothing to add
   style.css already styles .team-grid, .team-card, .team-photo (a fixed
   112x112 avatar), .team-role and .team-li. My first pass overrode
   .team-photo with a stretched banner and an aspect-ratio, which fought a
   design that already worked and collapsed to the broken-image width in
   this sandbox. Removed: the carried styles are correct.
   Because the avatars have fixed CSS dimensions, the missing width/height
   attributes on those remote headshots are not a CLS risk.
   ============================================================ */

/* footer column headings moved h4 -> h3 to avoid a heading-level skip on every
   page; keep the visual weight identical to before */
.site-footer .foot-grid h3 {
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: #fff;
  background: none;
  -webkit-text-fill-color: #fff;
}

/* Visually-hidden but announced. Also keeps heading levels progressing
   h1 -> h2 -> h3 on pages whose content has no h2, which was the only
   remaining heading-order warning in the audit. */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   30. Communities We Serve — three treatments
   ============================================================ */

/* --- homepage: card grid --- */
.cw-grid {
  display: grid;
  /* eight cards, so the column count is set explicitly rather than by auto-fit:
     auto-fit landed on three and left a hole in the last row */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1180px) { .cw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .cw-grid { grid-template-columns: 1fr; } }
.cw-card {
  padding: 22px 19px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  transition: transform .2s cubic-bezier(.4, 0, .2, 1),
              background .2s ease, border-color .2s ease;
}
.cw-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .2);
}
.cw-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 15px;
  border-radius: 12px;
  background: var(--grad-brand);
  color: #fff;
}
.cw-ic svg { width: 21px; height: 21px; }
.cw-card h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
  line-height: 1.3;
  color: #F3ECF7;
}
.cw-card p {
  margin: 0;
  font-size: .89rem;
  line-height: 1.55;
  color: rgba(241, 233, 247, .74);
}

/* --- platform: chips on the data-viz band --- */
.cw-chips { padding: 84px 0; }
.cw-chipwrap {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 40px;
  align-items: start;
}
.cw-chipset h3 {
  margin: 0 0 14px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.cw-chiplist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.cw-chiplist li {
  font-size: .88rem;
  padding: 8px 15px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .24);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* levels of care read as a scale, so they get the warm accent */
.cw-chiplist--alt li {
  background: rgba(255, 187, 81, .13);
  border-color: rgba(255, 187, 81, .42);
}

/* --- enterprise: argument + scrolling rail --- */
.cw-ent { padding-bottom: 0; }
.cw-ent-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 46px; align-items: start; }
.cw-ent-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; }
.cw-ent-list li {
  position: relative;
  padding-left: 21px;
  font-size: .97rem;
  line-height: 1.5;
  color: rgba(241, 233, 247, .78);
}
.cw-ent-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .56em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grad-brand);
}
.cw-ent-note {
  padding: 26px 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
}
.cw-ent-kicker {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-size: 1.08rem;
  line-height: 1.36;
  color: #F3ECF7;
}
.cw-ent-note p:last-child {
  margin: 0;
  font-size: .94rem;
  line-height: 1.55;
  color: rgba(241, 233, 247, .74);
}
.cw-rail {
  margin-top: 52px;
  padding: 20px 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .025);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cw-rail-track { display: flex; gap: 14px; width: max-content; padding: 0 7px; }
.cw-rail-track span {
  flex: none;
  font-size: .9rem;
  letter-spacing: .02em;
  padding: 9px 18px;
  border-radius: 999px;
  color: rgba(255, 255, 255, .86);
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  /* two identical copies, translated exactly -50% for a seamless loop —
     same technique as the EHR marquee, no pause on hover */
  .cw-rail-track { animation: cwRail 48s linear infinite; }
  @keyframes cwRail {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
}

@media (max-width: 900px) {
  .cw-chipwrap { grid-template-columns: 1fr; gap: 28px; }
  .cw-ent-grid { grid-template-columns: 1fr; gap: 28px; }
  .cw-chips { padding: 62px 0; }
  .cw-rail { margin-top: 36px; }
}

/* ============================================================
   31. One H1 treatment, site-wide
   alt.css gives .hero h1 / .page-hero h1 the pale warm ramp; the
   homepage hero uses the full brand spectrum. Unify on the latter.

   Specificity note: a bare `h1` is (0,0,1) and loses to alt.css's
   `.hero h1` at (0,1,1). Scoping to [data-theme="dark"] ties that
   specificity and wins on order, since lean.css loads last.

   background-IMAGE, never the `background` shorthand — the shorthand
   resets background-clip to border-box and paints the gradient as a
   solid block with invisible letters. That was the v18 hero bug.
   ============================================================ */
[data-theme="dark"] h1 {
  background-image: var(--text-grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  [data-theme="dark"] h1 {
    color: #F6ECFF;
    -webkit-text-fill-color: #F6ECFF;
    background-image: none;
  }
}

/* --- make the one H1 treatment work everywhere -----------------------------
   Two problems the site-wide gradient exposed:

   1. An h1 is a block, so its background box spans the full container even
      when the text is short. "Privacy Policy" therefore sampled only the warm
      start of the ramp and read as plain orange, while long headings got the
      whole spectrum. Shrinking the box to the text makes the ramp map onto the
      glyphs regardless of length.
   2. .page-hero animates a bright magenta gradient, and saturated mid-tone
      type on it is genuinely hard to read. The previous ramp got away with it
      by being near-white. Fixing the surface keeps a single type treatment
      instead of forking it per background. */
[data-theme="dark"] h1 {
  width: fit-content;
  max-width: 100%;
}
/* centred heroes need the shrunken box re-centred */
.lhero-head h1,
.center h1 { margin-inline: auto; }
/* ...except the left-aligned photo hero variant */
.lhero--photo .lhero-head h1 { margin-inline: 0; }

.page-hero { position: relative; isolation: isolate; }
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(18, 6, 34, .58) 0%, rgba(22, 8, 42, .44) 52%,
                    rgba(16, 5, 32, .66) 100%);
}
.page-hero > * { position: relative; z-index: 1; }
/* ...except the hero's own background layers. Both are absolutely positioned
   by style.css (.ph-photo{position:absolute;inset:0}), and the blanket rule
   above outranks that selector (0,1,1 vs 0,1,0), so it was collapsing them to
   height 0: on why / about / platform the hero photo was fetched on every
   load -- 130-172KB -- and then never painted, and .ph-scrim, the gradient
   that makes the headline readable over it, went with it. They belong on
   z-index 0, under the ::after wash and under .container's content. */
.page-hero > .ph-photo,
.page-hero > .ph-scrim { position: absolute; z-index: 0; }

/* ============================================================
   32. Light purple glow behind the mobile render
   Sits behind the phones and breathes. Pure CSS, transform +
   opacity only, so it composites on the GPU.
   ============================================================ */
.mob-art { position: relative; }
.mob-glow {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 138%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  /* the render is largely opaque, so a glow sitting only behind it barely
     shows — this is sized to halo past the device edges */
  background:
    radial-gradient(closest-side,
      rgba(196, 138, 255, .72) 0%,
      rgba(172, 104, 250, .48) 30%,
      rgba(146, 84, 232, .24) 54%,
      rgba(132, 72, 216, .08) 72%,
      rgba(132, 72, 216, 0) 84%);
  filter: blur(30px);
}
.mob-art img { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .mob-glow { animation: mobGlow 9s ease-in-out infinite; }
  /* a second, offset layer so the bloom drifts instead of pulsing evenly */
  .mob-glow::after {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: radial-gradient(closest-side,
      rgba(224, 176, 255, .5), rgba(224, 176, 255, 0) 72%);
    animation: mobGlowInner 13s ease-in-out infinite;
  }
  @keyframes mobGlow {
    0%, 100% { transform: translate(-50%, -50%) scale(.94); opacity: .78; }
    50%      { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
  }
  @keyframes mobGlowInner {
    0%, 100% { transform: translate(-4%, 3%) scale(1); opacity: .55; }
    50%      { transform: translate(5%, -4%) scale(1.12); opacity: .9; }
  }
}
@media (max-width: 900px) { .mob-glow { width: 128%; } }

/* Two-sentence headings break after the first sentence (see
   seo.split_two_sentence_headings). Block spans rather than <br> so the
   break survives reflow and the rhythm stays adjustable. */
.hsent { display: block; }
.hsent + .hsent { margin-top: .06em; }

/* ============================================================
   33. EHR wordmarks (replacing the SMB logo images)
   ============================================================ */
.ehrm-item {
  flex: none;
  width: 162px;
  /* 44px clipped the sub-lockup on stacked marks (Cantata, PCE) to the point
     of illegibility; 52 gives them room without unbalancing the wide ones */
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
}
.ehrm-item--word {
  flex-direction: column;
  gap: 1px;
  width: 172px;
  padding: 0 6px;
  text-align: center;
}
.ehrm-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -.01em;
  color: #6A6178;
  -webkit-text-fill-color: #6A6178;
  white-space: nowrap;
  transition: color .25s ease, -webkit-text-fill-color .25s ease;
}
.ehrm-item--word:hover .ehrm-name {
  color: #2E1A46;
  -webkit-text-fill-color: #2E1A46;
}
.ehrm-sub2 {
  font-family: var(--font-body);
  font-size: .72rem;
  letter-spacing: .02em;
  /* #9A93A6 measured 2.96:1 on white, below the 4.5 AA threshold for normal
     text. It was lightened in v21.1 to balance visual weight against the
     greyscale logos; #787083 keeps that balance at 4.73:1. */
  color: #787083;
  -webkit-text-fill-color: #787083;
  white-space: nowrap;
}
.ehrm-item img[data-broken] { display: none; }
@media (max-width: 720px) {
  .ehrm-item { width: 126px; height: 42px; }
  .ehrm-item--word { width: 140px; }
  .ehrm-name { font-size: .96rem; }
  .ehrm-sub2 { font-size: .67rem; }
}

/* ============================================================
   34. Forward-thinking customers — display-only logo rail
   ============================================================ */
.cust {
  background: #fff;
  padding: 48px 0 44px;
  overflow: hidden;
}
.cust-head { text-align: center; margin-bottom: 30px; }
[data-theme="dark"] .cust .cust-eyebrow {
  margin: 0 0 8px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7C42C4;
  -webkit-text-fill-color: #7C42C4;
  background-image: none;
}
[data-theme="dark"] .cust h2 {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 2.4vw, 1.86rem);
  line-height: 1.24;
  color: #2A1440;
  background: none;
  background-image: none;
  -webkit-text-fill-color: #2A1440;
}
[data-theme="dark"] .cust .cust-sub {
  margin: 0 auto;
  max-width: 58ch;
  font-size: .97rem;
  line-height: 1.55;
  color: #4A4256;
  -webkit-text-fill-color: #4A4256;
  background-image: none;
}
.cust-rail {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.cust-track { display: flex; align-items: center; gap: 30px; width: max-content; padding: 6px 15px; }
/* a fixed frame per logo, with contain inside it, is what makes eleven wildly
   different source crops read as one uniform row */
.cust-item {
  flex: none;
  width: 176px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
}
.cust-item[data-broken] { display: none; }
.cust-item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(.5);
  transition: filter .25s ease;
}
.cust-item:hover img { filter: grayscale(0) opacity(1); }
@media (prefers-reduced-motion: no-preference) {
  /* two identical copies, translated exactly -50% for a seamless loop.
     No pause on hover, matching the EHR rail. */
  .cust-track { animation: custScroll 74s linear infinite; }
  @keyframes custScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
}
@media (max-width: 720px) {
  .cust { padding: 34px 0 30px; }
  .cust-track { gap: 20px; }
  .cust-item { width: 132px; height: 58px; }
}

/* ============================================================
   35. Industry trends
   ============================================================ */
.trend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.trend {
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  transition: transform .2s cubic-bezier(.4, 0, .2, 1), border-color .2s ease;
}
.trend:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .2); }
.trend h3 {
  margin: 0 0 10px;
  font-size: 1.04rem;
  line-height: 1.32;
  color: #F3ECF7;
}
.trend-what {
  margin: 0 0 16px;
  font-size: .92rem;
  line-height: 1.55;
  color: rgba(241, 233, 247, .7);
}
.trend-do {
  margin: auto 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  font-size: .92rem;
  line-height: 1.55;
  color: rgba(241, 233, 247, .86);
}
.trend-tag {
  display: block;
  margin-bottom: 6px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* With motion reduced neither rail animates, so the reversed one has to be
   parked at its start offset rather than at 0 — otherwise its visible half is
   the duplicate set and the row appears to begin mid-sequence. */
@media (prefers-reduced-motion: reduce) {
  .ehrm-track--rev { transform: translateX(-50%); }
}

/* The monitor video must reserve its box before metadata loads. Without this
   the .mon section grew mid-scroll and main.js's rise formula — which divides
   by the section height — froze and then jumped. */
.mon .mon-img {
  aspect-ratio: 1238 / 691;
  height: auto;
}

/* ============================================================
   36. Testimonials with organization logos
   The avatar is the org's mark, not a face. Logos sit on a white
   circle because most are dark artwork designed for light ground.
   ============================================================ */
.tq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}
.tq {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 26px 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  transition: transform .2s cubic-bezier(.4, 0, .2, 1), border-color .2s ease;
}
.tq:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .2); }
.tq-av {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  flex: none;
}
.tq-av img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tq blockquote {
  margin: 0 0 16px;
  font-family: var(--font-head);
  font-size: 1.01rem;
  line-height: 1.5;
  color: #F3ECF7;
}
.tq figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.tq-who { font-size: .9rem; font-weight: 700; color: rgba(241, 233, 247, .9); }
.tq-org {
  font-size: .82rem;
  letter-spacing: .02em;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* a two-up feature pair reads larger */
.tq-sec--feature .tq-grid { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.tq-sec--feature .tq blockquote { font-size: clamp(1.06rem, 1.9vw, 1.28rem); }

/* ============================================================
   37. Culture photo marquee (careers)
   ============================================================ */
.cult { padding: 0; overflow: hidden; }
.cult-rail {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cult-rail + .cult-rail { margin-top: 12px; }
.cult-track { display: flex; gap: 12px; width: max-content; }
.cult-track img {
  height: 180px;
  width: auto;
  flex: none;
  border-radius: 12px;
  object-fit: cover;
}
@media (prefers-reduced-motion: no-preference) {
  /* counter-scrolling, mismatched durations, same technique as the EHR rails */
  .cult-track { animation: cultScroll 72s linear infinite; }
  .cult-track--rev { animation: cultScrollRev 84s linear infinite; }
  @keyframes cultScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @keyframes cultScrollRev {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .cult-track--rev { transform: translateX(-50%); }
}
@media (max-width: 720px) { .cult-track img { height: 124px; } }

/* ============================================================
   38. ADA fixes from the axe audit
   ============================================================ */

/* 1.4.1 Use of Color. Links sitting inside a paragraph were distinguished
   from the surrounding text by hue alone, at 1.1:1 to 1.6:1 — well under the
   3:1 WCAG requires when colour is the only signal. Underlining them is the
   standard remedy and costs nothing visually, since standalone links (nav,
   buttons, cards, rails) are excluded below. */
main p > a:not(.btn):not(.jf-row > a),
main li > a:not(.btn),
.tq figcaption a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
main p > a:not(.btn):hover,
main li > a:not(.btn):hover { text-decoration-thickness: 2px; }
/* components whose links are already unambiguous by position and treatment */
.btn-row a,
.foot-grid a,
.jobs-feed a,
.cw-card a,
.trend a,
.submenu a { text-decoration: none; }

/* gradient lede above the EHR heading (Ross: "keep your EHR, onboard
   intelligence" should lead the white strip) */
[data-theme="dark"] .ehrm .ehrm-lede {
  /* It is the callout that leads the strip, so it gets air above it and
     carries a quarter more weight on screen than the sub-heading under it. */
  margin: 0 0 10px;
  padding-top: 20px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.53rem, 2.88vw, 2.1rem);
  line-height: 1.2;
  background-image: var(--text-grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  [data-theme="dark"] .ehrm .ehrm-lede { color: #7C42C4; -webkit-text-fill-color: #7C42C4; }
}
[data-theme="dark"] .ehrm .ehrm-tm {
  margin: 18px auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: .72rem;
  line-height: 1.5;
  /* 4.62:1 on white, clears AA for small text */
  color: #6E6779;
  -webkit-text-fill-color: #6E6779;
  background-image: none;
}
.cust-cta { text-align: center; margin-top: 26px; }
/* The customers rail is a white band inside a dark-themed page. .btn--ghost is
   styled for dark surfaces (white text, white border, 8% white fill), so on this
   strip the button rendered as literally nothing: contrast 1.0, invisible rather
   than merely low. Give it the light-surface treatment instead.

   Literal hex, not var(--plum)/var(--purple): alt.css re-points both to pale
   dark-surface values under [data-theme="dark"], which on white would be just as
   invisible. These are the light-theme values.
   #6A2C74 on #fff is 9.3:1 (text, needs 4.5); #BF56C2 is 3.9:1 (border, needs 3). */
[data-theme="dark"] .cust .btn--ghost {
  background: transparent;
  border-color: #BF56C2;
  color: #6A2C74;
  backdrop-filter: none;
}
[data-theme="dark"] .cust .btn--ghost:hover,
[data-theme="dark"] .cust .btn--ghost:focus-visible {
  background: #BF56C2;
  color: #fff;
}

/* Ross: logos should carry full colour through the middle of the rail and
   fade to grey at the edges. A mask can't drive a filter, so the colour is
   painted by a second copy of the row revealed through a centre-weighted
   mask, sitting exactly on top of the greyscale one. */
.ehrm-rail, .cust-rail { position: relative; }
.ehrm-track, .cust-track { position: relative; }
.ehrm-item img, .cust-item img { transition: none; }
@supports (mask-image: linear-gradient(#000, #000)) {
  .ehrm-rail::after, .cust-rail::after { content: none; }
}

/* Skip control for the DNA walkthrough. The section pins for eight gestures;
   a reader arriving cold needs a visible way out that isn't the keyboard hint. */
.dnaj-skip {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: .82rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .88);
  background: rgba(20, 8, 38, .72);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .18s ease, border-color .18s ease;
}
.dnaj-skip:hover { background: rgba(40, 16, 70, .9); border-color: rgba(255, 255, 255, .5); }
.dnaj-skip:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
@media (max-width: 720px) { .dnaj-skip { right: 12px; bottom: 12px; font-size: .76rem; } }

/* ============================================================
   39. Three kinds of context (enterprise)
   ============================================================ */
.ctx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.ctx {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  transition: transform .2s cubic-bezier(.4, 0, .2, 1), border-color .2s ease;
}
.ctx:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .2); }
.ctx h3 { margin: 0 0 12px; font-size: 1.08rem; color: #F3ECF7; }
.ctx p { margin: 0; font-size: .94rem; line-height: 1.55; color: rgba(241, 233, 247, .76); }
.ctx-kick {
  margin-top: auto !important;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  font-family: var(--font-head);
  font-weight: 700;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ctx-kick { margin-top: 18px; }

/* ============================================================
   40. DNA overlays: gradient highlights + scroll prompt
   ============================================================ */
/* Any <b> highlight inside the journey overlays takes the brand gradient,
   which is the treatment used for emphasis everywhere else on the site. */
.dnaj-intro h2 b,
.dnaj-outro h2 b {
  background-image: var(--text-grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: inherit;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .dnaj-intro h2 b, .dnaj-outro h2 b { color: #FF6FA8; -webkit-text-fill-color: #FF6FA8; }
}

/* The scroll prompt replaces the button at the opening frame. It animates
   rather than sitting static, so it reads as an invitation, not a label. */
.dnaj-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.dnaj-hint span {
  font-size: .72rem;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .7);
}
@media (prefers-reduced-motion: no-preference) {
  .dnaj-hint svg { animation: dnajNudge 1.9s cubic-bezier(.4, 0, .3, 1) infinite; }
  .dnaj-hint::after {
    content: "";
    display: block;
    width: 1px;
    height: 34px;
    background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0));
    animation: dnajTrail 1.9s cubic-bezier(.4, 0, .3, 1) infinite;
  }
  @keyframes dnajNudge {
    0%, 100% { transform: translateY(0); opacity: .55; }
    45%      { transform: translateY(7px); opacity: 1; }
  }
  @keyframes dnajTrail {
    0%, 100% { transform: scaleY(.4); opacity: .3; transform-origin: top; }
    45%      { transform: scaleY(1); opacity: .8; transform-origin: top; }
  }
}

/* rail markers are interactive now, so they need to look and focus like it */
.dnaj-rail-item { cursor: pointer; background: none; border: 0; }
.dnaj-rail-item:hover { color: rgba(255, 255, 255, .95) !important; }
.dnaj-rail-item:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ============================================================
   41. No orphaned last words
   text-wrap: balance on headings spreads the lines evenly so a single
   word never lands alone; pretty does the same for body copy. Both
   degrade to normal wrapping where unsupported, and the build also
   inserts a non-breaking space before the final word of headings,
   which is the part that works everywhere.
   ============================================================ */
h1, h2, h3, .pbh-title, .dnaj-intro h2, .dnaj-outro h2, .ayw-title, .mon-title {
  text-wrap: balance;
}
p, .lead, li, figcaption, blockquote { text-wrap: pretty; }

/* Explore Now: sits under the opening copy block and triggers the zoom into
   stage 01. The scroll hint stays as the passive cue for anyone who just
   scrolls instead. */
.dnaj-explore {
  margin-top: 26px;
  cursor: pointer;
  border: 0;
  font-family: var(--font-body);
}
.dnaj-explore:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* =========================================================================
   DEMO PAGE (/demo) — conversion-forward booking page
   ========================================================================= */
.dhero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  padding: 64px 0 76px;
  background:
    radial-gradient(64% 52% at 78% 8%, rgba(200, 53, 248, .26), transparent 68%),
    radial-gradient(56% 48% at 8% 84%, rgba(82, 81, 243, .24), transparent 70%),
    linear-gradient(170deg, var(--h1) 0%, var(--h3) 34%, var(--h5) 72%, var(--bg) 100%);
}
.dhero-grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 52px; align-items: start;
}
.dhero h1 {
  color: #fff; margin: 0 0 18px;
  font-size: clamp(2.1rem, 4.2vw, 3.25rem); line-height: 1.08;
}
.dhero-lead { color: rgba(255, 255, 255, .88); font-size: 1.06rem; margin: 0 0 30px; max-width: 34em; }

/* what you'll see — checklist */
.dbk-list { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 15px; }
.dbk-list li { display: flex; gap: 13px; align-items: flex-start; color: rgba(255, 255, 255, .8); line-height: 1.5; }
.dbk-list strong { color: #fff; font-weight: 700; }
.dbk-check {
  flex: 0 0 auto; width: 23px; height: 23px; margin-top: 2px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: var(--grad-brand); box-shadow: 0 2px 10px rgba(231, 70, 178, .4);
}
.dbk-check svg { width: 13px; height: 13px; }
.dbk-trust {
  display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  color: rgba(255, 255, 255, .68); text-transform: uppercase;
}
.dbk-trust .dot { opacity: .45; }

/* booking panel */
.dbk-panel {
  background: rgba(255, 255, 255, .07); border: 1px solid var(--glass-line);
  border-radius: 22px; padding: 28px 26px 24px;
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  box-shadow: 0 26px 64px rgba(12, 4, 28, .46);
}
.dbk-title { color: #fff; font-size: clamp(1.3rem, 2.1vw, 1.62rem); margin: 0 0 8px; }
.dbk-sub { color: rgba(255, 255, 255, .74); font-size: .95rem; margin: 0 0 20px; }
.dbk-embed {
  background: #fff; border-radius: 15px; overflow: hidden; min-height: 620px;
}
.dbk-embed .meetings-iframe-container { min-height: 620px; }
.dbk-embed iframe { display: block; width: 100%; border: 0; }
.dbk-fallback { padding: 34px 22px; text-align: center; }

/* how it goes — numbered steps */
.dsteps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 20px;
  counter-reset: dstep;
}
.dstep {
  background: rgba(255, 255, 255, .045); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 22px 24px; position: relative;
  transition: transform .3s ease, border-color .3s ease;
}
.dstep:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .22); }
.dstep-n {
  display: block; font-family: var(--font-head); font-weight: 700; font-size: .92rem;
  letter-spacing: .1em; margin-bottom: 12px;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.dstep h3 { font-size: 1.12rem; margin: 0 0 9px; }
.dstep p { color: var(--muted); font-size: .96rem; margin: 0; line-height: 1.58; }

/* slider: logos read better contained, and the light-theme cite colour needs lifting */
.tsl-av--logo { background: rgba(255, 255, 255, .94); }
.tsl-av--logo img { object-fit: contain; padding: 14px; background: transparent; }
[data-theme="dark"] .tsl-quote { color: var(--ink); }
[data-theme="dark"] .tsl-cite { color: rgba(241, 233, 247, .92); }
[data-theme="dark"] .tsl-role { color: var(--muted); }
[data-theme="dark"] .tsl-arrow { border-color: var(--line); color: var(--ink); }

@media (max-width: 980px) {
  .dhero-grid { grid-template-columns: 1fr; gap: 38px; }
  .dhero { padding: 46px 0 56px; }
}
@media (max-width: 560px) {
  .dbk-panel { padding: 20px 16px 18px; border-radius: 18px; }
  .dbk-embed, .dbk-embed .meetings-iframe-container { min-height: 560px; }
  .dbk-trust { justify-content: center; }
  .dhero-copy { text-align: center; }
  .dhero-lead { margin-left: auto; margin-right: auto; }
  .dbk-list li { text-align: left; }
}
.dbk-embed { position: relative; }

/* ---- .ca-booking: the scheduler component, namespaced so it neither leaks
   into the page nor inherits from it. It sits inside .dbk-panel, which already
   supplies the frame, so the component's own border/shadow are not used here. */
.ca-booking { isolation: isolate; }
.ca-booking * { box-sizing: border-box; }
.ca-booking .meetings-iframe-container { width: 100%; min-width: 0; }
.ca-booking .meetings-iframe-container iframe {
  display: block; width: 100%; min-width: 0; border: 0;
}
/* Loading placeholder, removed the moment the iframe reports ready. */
.ca-booking__skeleton {
  position: absolute; inset: 0; z-index: 2; overflow: hidden;
  display: grid; place-items: center;
  background: #fff;
}
.ca-booking[data-state="ready"] .ca-booking__skeleton,
.ca-booking.is-fallback .ca-booking__skeleton { display: none; }
.ca-booking__skeleton span {
  position: relative; z-index: 1;
  font-size: .92rem; color: #5b5560;
}
.ca-booking__skeleton::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(100deg,
    transparent 20%, rgba(214, 200, 232, .55) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: ca-booking-sheen 1.6s ease-in-out infinite;
}
@keyframes ca-booking-sheen { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .ca-booking__skeleton::before { animation: none; }
}
/* hide the container outright while the fallback is showing, so a late
   iframe cannot render underneath the error text */
.dbk-embed.is-fallback, .dbk-embed.is-fallback .meetings-iframe-container { min-height: 0; }
.dbk-embed.is-fallback .meetings-iframe-container { display: none; }
.dbk-fallback { padding: 40px 24px; text-align: center; }
.dbk-fallback p { color: #5b5560; margin: 0 0 16px; font-size: .95rem; }

/* ============================================================
   Oversight laptop — same treatment as the mobile renders.
   The asset now carries its own alpha (the white page it was exported on has
   been keyed out), so it gets the drop-shadow + animated bloom rather than
   sitting on an opaque white card.
   ============================================================ */
.over-art { position: relative; }
.over-art img {
  position: relative;
  z-index: 1;
  background: none;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 26px 46px rgba(8, 3, 20, .55));
}
.over-glow {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 104%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(closest-side,
      rgba(196, 138, 255, .60) 0%,
      rgba(172, 104, 250, .40) 32%,
      rgba(146, 84, 232, .20) 56%,
      rgba(132, 72, 216, .07) 74%,
      rgba(132, 72, 216, 0) 86%);
  filter: blur(34px);
}
@media (prefers-reduced-motion: no-preference) {
  .over-glow { animation: mobGlow 11s ease-in-out infinite; }
  .over-glow::after {
    content: "";
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    background: radial-gradient(closest-side,
      rgba(224, 176, 255, .42), rgba(224, 176, 255, 0) 72%);
    animation: mobGlowInner 15s ease-in-out infinite;
  }
}
@media (max-width: 900px) {
  .over-art { max-width: 460px; margin: 0 auto; }
  .over-glow { width: 120%; }
}

/* =========================================================================
   MOBILE REFINEMENTS
   ========================================================================= */

/* A 320px (and 380px on the feature variant) column minimum is wider than the
   content box of a 375px phone, so the grid track overflowed its container.
   Because .tq has no clipping ancestor it widened the document itself, giving
   the whole page a horizontal scroll — which is what made centred blocks look
   off-centre. min() lets the track collapse instead. */
.tq-grid { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.tq-sec--feature .tq-grid { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }

@media (max-width: 900px) {
  /* DNA helix: the grid collapses to one column, but the mark kept its
     max-width and stayed flush left */
  .dnaband-mark { margin-inline: auto; }
  .dnaband-grid { justify-items: center; }
  .dnaband-grid > *:not(.dnaband-mark) { justify-self: stretch; }
}

@media (max-width: 720px) {
  /* Stacked CTAs: buttons sized to their label look ragged once they wrap,
     so below the wrap point they share one width. */
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row > .btn,
  .btn-row > a.btn { width: 100%; text-align: center; }
  .btn-row.center, .center .btn-row { align-items: stretch; }

  /* lone inline CTAs sitting in a <p> rather than a .btn-row */
  .section p > .btn:only-child { display: block; width: 100%; text-align: center; }
  p:has(> .btn:only-child) { text-align: center; }
}

/* =========================================================================
   PRODUCTS PAGE — hero strip + staggered spec/value split
   ========================================================================= */
.prow { padding: 0; display: block; }
.pblock { display: block; padding-bottom: 54px; }   /* scroll-margin-top is set with the other anchor targets */
.pblock + .pblock { padding-top: 6px; }

/* ---- full-bleed hero strip ---- */
.pstrip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 190px;
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}
.pstrip-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  transform: scale(1.04);
  transition: transform 1.1s cubic-bezier(.2,.6,.2,1);
}
.pblock:hover .pstrip-bg { transform: scale(1.09); }
/* palette wash + scrim: each product takes the two stops of its own icon
   gradient, so no two neighbours land on the same colour */
.pstrip::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,3,24,.30), rgba(10,3,24,.58)),
    linear-gradient(100deg, var(--ps-a) 0%, var(--ps-b) 100%);
}
.pstrip-inner {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 22px;
  padding-top: 30px; padding-bottom: 30px;
  width: 100%;
}
.pstrip-mark {
  flex: 0 0 auto;
  width: 96px; height: 96px; border-radius: 22px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.34);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.pstrip-mark svg { width: 64px; height: 64px; }
.pstrip-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pstrip-name {
  margin: 0; color: #fff; line-height: 1.04;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  text-shadow: 0 2px 18px rgba(8,3,20,.5);
}
/* The product names were <h1>, which gave the page nine of them. They are <h2>
   now, and their gradient has to be restored explicitly: it was never coming
   from .pstrip-name, it came from the tag rule [data-theme="dark"] h1 in
   alt.css. Without this they would fall to .section--soft h2 and turn cool.
   Attribute + class outranks .section--soft h2, so this is what wins. */
[data-theme="dark"] .pstrip-name {
  background-image: var(--text-grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* The h1 rule also suppressed .pstrip-name's own text-shadow, so it was never
     painting. Keep it suppressed: this restores the previous rendering exactly
     rather than quietly introducing a halo behind clipped text. */
  text-shadow: none;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  [data-theme="dark"] .pstrip-name { color: #F6ECFF; -webkit-text-fill-color: #F6ECFF; background-image: none; }
}
.pstrip-role {
  font-size: .95rem; font-weight: 600; letter-spacing: .02em;
  color: rgba(255,255,255,.86);
}
.pstrip .prow-status { margin-left: auto; flex: 0 0 auto; }

.pstrip--document   { --ps-a: rgba(200,53,248,.52); --ps-b: rgba(82,81,243,.62); }
.pstrip--comply     { --ps-a: rgba(252,210,83,.46); --ps-b: rgba(252,155,105,.60); }
.pstrip--compose    { --ps-a: rgba(82,81,243,.56); --ps-b: rgba(202,54,243,.56); }
.pstrip--connect    { --ps-a: rgba(4,99,239,.56);  --ps-b: rgba(200,53,248,.52); }
.pstrip--signal     { --ps-a: rgba(252,210,83,.44); --ps-b: rgba(251,80,134,.60); }
.pstrip--margin     { --ps-a: rgba(231,70,178,.56); --ps-b: rgba(200,53,248,.54); }
.pstrip--front-door { --ps-a: rgba(252,155,105,.52); --ps-b: rgba(251,80,134,.60); }
.pstrip--supervise  { --ps-a: rgba(251,80,134,.52); --ps-b: rgba(200,53,248,.56); }

/* ---- spec / value split, alternating sides ---- */
.psplit {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: 46px;
  align-items: start;
}
.pblock--rev .psplit { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.pblock--rev .psplit-specs { order: 2; }
.pblock--rev .psplit-value { order: 1; }
.psplit-value { position: sticky; top: 96px; }

/* products-alt/: a headed spec list beside the value card, with the CTAs
   under it so both columns carry similar weight on desktop */
.psplit--brief { align-items: center; }
.psplit--brief .psplit-value { position: static; }
.psplit-specs-h {
  margin: 0 0 20px;
  font-size: clamp(1.3rem, 2.1vw, 1.6rem);
  line-height: 1.2;
  color: #F3ECF7;
}
.psplit--brief .prow-points { margin: 0; gap: 18px; }
.psplit--brief .prow-points li {
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(241,233,247,.74);
  padding-left: 24px;
}
.psplit--brief .prow-points strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-head);
  font-size: clamp(1.06rem, 1.6vw, 1.18rem);
  line-height: 1.4;
  color: #F0E7F6;
}
.psplit--brief .prow-points li::before { width: 10px; height: 10px; top: .55em; }
.psplit-specs .pvalue-cta { margin-top: 28px; }

.pvalue {
  position: relative;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 22px;
  padding: 30px 28px;
  background: rgba(255,255,255,.035);
  will-change: transform;
}
/* the glow rides on a pseudo-element so the animation stays on opacity */
.pvalue::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, rgba(231,70,178,.85), rgba(82,81,243,.85), rgba(200,53,248,.85));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .5;
  pointer-events: none;
}
.pvalue::after {
  content: "";
  position: absolute; inset: -18px;
  border-radius: 30px;
  background: radial-gradient(60% 50% at 50% 50%, rgba(178,84,236,.30), rgba(178,84,236,0) 72%);
  filter: blur(16px);
  z-index: -1;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .pvalue::before { animation: pvalueEdge 7s ease-in-out infinite; }
  .pvalue::after  { animation: pvalueHalo 9s ease-in-out infinite; }
  @keyframes pvalueEdge { 0%,100% { opacity: .38; } 50% { opacity: .82; } }
  @keyframes pvalueHalo { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
}
.pvalue-eyebrow {
  text-transform: uppercase; letter-spacing: .16em; font-weight: 700;
  font-size: .72rem; color: rgba(241,233,247,.56); margin: 0 0 12px;
}
.pvalue-h {
  margin: 0 0 14px;
  font-size: clamp(1.32rem, 2.5vw, 1.92rem);
  line-height: 1.22;
  background: linear-gradient(104deg, #FFC06B 0%, #F06FB2 38%, #C68CF0 70%, #8FA8FF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.pvalue-sub { margin: 0; color: rgba(241,233,247,.74); font-size: .96rem; line-height: 1.56; }

@media (max-width: 980px) {
  .psplit, .pblock--rev .psplit { grid-template-columns: 1fr; gap: 30px; }
  /* stacked, the takeaway leads and the spec list follows */
  .psplit-specs, .pblock--rev .psplit-specs { order: 2; }
  .psplit-value, .pblock--rev .psplit-value { order: 1; position: static; }
  .pblock { padding-bottom: 44px; }
  .pstrip { min-height: 150px; margin-bottom: 30px; }
  .pstrip-mark { width: 72px; height: 72px; border-radius: 18px; }
  .pstrip-mark svg { width: 48px; height: 48px; }
}
@media (max-width: 620px) {
  .pstrip-inner { flex-wrap: wrap; gap: 16px; }
  .pstrip .prow-status { margin-left: 0; order: 3; }
  .pstrip-mark { width: 60px; height: 60px; border-radius: 15px; }
  .pstrip-mark svg { width: 40px; height: 40px; }
  .pvalue { padding: 24px 20px; }
}

/* =========================================================================
   PRIVATE PRACTICE PRICING (mirrors app.clinicalnotes.ai/pricing)
   ========================================================================= */
.pp-toggle {
  display: flex; justify-content: center; gap: 4px;
  margin: 0 auto 34px; padding: 5px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--line);
  border-radius: 999px; width: max-content;
}
.pp-tg {
  border: 0; cursor: pointer; border-radius: 999px;
  padding: 10px 22px; font-family: var(--font-body);
  font-size: .92rem; font-weight: 700; color: var(--muted);
  background: transparent; transition: background .25s ease, color .25s ease;
}
.pp-tg:hover { color: var(--ink); }
.pp-tg.is-active { background: var(--grad-brand); color: #fff; }
.pp-tg:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

.pp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 18px; align-items: start;
}
.pp-card {
  position: relative;
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px 24px;
  transition: transform .3s ease, border-color .3s ease;
}
.pp-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .22); }
.pp-card--feature { border-color: rgba(240, 111, 178, .5); }
.pp-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--grad-brand); color: #fff;
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 16px; border-radius: 999px; white-space: nowrap;
}
.pp-name { margin: 0 0 10px; font-size: 1.24rem; }
.pp-price { margin: 0 0 14px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; }
.pp-amt { font-family: var(--font-head); font-weight: 700; font-size: 2.1rem; color: var(--ink); }
.pp-per { font-size: .9rem; color: var(--muted); }
.pp-billed { font-size: .82rem; color: var(--muted); flex-basis: 100%; }
.pp-blurb { color: var(--muted); font-size: .94rem; line-height: 1.5; margin: 0 0 18px; }
.pp-cta { width: 100%; text-align: center; margin-bottom: 20px; }
.pp-feat-h { font-weight: 700; font-size: .95rem; margin: 0 0 10px; color: var(--ink); }
.pp-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pp-feats li {
  position: relative; padding-left: 20px;
  font-size: .9rem; color: var(--muted); line-height: 1.45;
}
.pp-feats li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--grad-brand);
}
/* the Enterprise card has no price row, so pull its blurb up to the same line */
.pp-card:not(:has(.pp-price)) .pp-blurb { margin-top: 4px; }
@media (max-width: 560px) {
  .pp-toggle { width: 100%; }
  .pp-tg { flex: 1; padding: 11px 10px; font-size: .86rem; }
}
/* divider under the price block, and a floor on the blurb so the three paid
   plans' feature lists start on the same line despite different blurb lengths */
.pp-price, .pp-card:not(:has(.pp-price)) .pp-name { border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.pp-price { margin-bottom: 16px; }
.pp-blurb { min-height: 4.4em; }
@media (max-width: 860px) { .pp-blurb { min-height: 0; } }

/* One trial CTA under the whole table. The three paid tiers start the same
   trial, so three identical buttons inside the columns were three ways to ask
   the same question; the plan is picked on the pricing page regardless. */
.pp-cta-row { margin-top: 34px; text-align: center; }
.pp-cta-all { min-width: min(340px, 100%); }
.pp-cta-note { margin: 12px 0 0; font-size: .88rem; color: var(--muted); }

/* =========================================================================
   DNA JOURNEY v5 — button-driven controls
   ========================================================================= */
/* The intro heading is an h2 under the page h1; these keep what it rendered as. */
.dnaj-intro h2 {
  font-family: var(--font-head); font-weight: 300;
  font-size: clamp(30px, 3.6vw, 48px); line-height: 1.2; color: #fff; margin: 0 0 18px;
}
.dnaj-intro h2 b { font-weight: 600; color: #b9aef2; }
.dnaj-intro p {
  font-family: var(--font-body); font-weight: 400;
  font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .7); margin: 0;
}
.dnaj--live .dnaj-intro { pointer-events: auto; }
.dnaj-explore { margin-top: 24px; }

/* skip moves to the top of the stage — the only place it can be read before
   the walkthrough starts */
/* v5 appends skip inside the sticky stage, where top-anchoring is correct.
   Scoped to that parent so the v4 build, which appends it to .dnaj, keeps the
   bottom-anchored position it was written for. */
.dnaj-stage > .dnaj-skip { top: 20px; right: 22px; bottom: auto; }
@media (max-width: 720px) { .dnaj-stage > .dnaj-skip { top: 12px; right: 12px; bottom: auto; } }
.dnaj-skip[hidden] { display: none; }

/* control bar */
.dnaj-ctl {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 40; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  justify-content: center; max-width: min(92vw, 720px);
}
.dnaj--static .dnaj-ctl, .dnaj--static .dnaj-skip { display: none; }
.dnaj-arrow {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  color: rgba(255, 255, 255, .9);
  background: rgba(20, 8, 38, .66);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}
.dnaj-arrow svg { width: 20px; height: 20px; }
.dnaj-arrow:hover:not(:disabled) { background: rgba(48, 20, 84, .9); border-color: rgba(255, 255, 255, .55); }
.dnaj-arrow:disabled { opacity: .3; cursor: default; }
.dnaj-arrow:focus-visible, .dnaj-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.dnaj-next { white-space: nowrap; }

/* quiet escapes — legible over whatever the stage is showing behind them,
   hence the glow rather than a plain light grey */
.dnaj-esc { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }
.dnaj-link {
  background: none; border: 0; cursor: pointer; padding: 6px 4px;
  font-family: var(--font-body); font-size: .82rem; font-weight: 600;
  letter-spacing: .03em; color: rgba(255, 255, 255, .82);
  text-shadow: 0 0 10px rgba(10, 4, 24, .95), 0 0 22px rgba(10, 4, 24, .8);
  transition: color .18s ease;
}
.dnaj-link:hover { color: #fff; text-decoration: underline; }
.dnaj-link[hidden] { display: none; }

.dnaj-card-cta { margin-top: 16px; align-self: flex-start; }
.dnaj-outro-cta { margin-top: 22px; }

@media (max-width: 720px) {
  .dnaj-ctl { bottom: 16px; gap: 9px; }
  .dnaj-arrow { width: 40px; height: 40px; }
  .dnaj-esc { width: 100%; order: 3; }
}

/* =========================================================================
   DNA JOURNEY v5.1 — direct entry from the opening frame, product attribution
   on each stage, and a control bar that can be read over moving 3D.
   ========================================================================= */

/* ---- intro: the explainer line under the lede ---- */
.dnaj-intro p.dnaj-intro-note {
  /* A blank line, not a nudge: this is a second paragraph, not a caption.
     Qualified with p + the parent because style.css sets `.dnaj-intro p
     {margin:0}` at (0,1,1); a bare `.dnaj-intro-note` (0,1,0) loses to it
     whatever the load order, which is why this margin never took effect. */
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(201, 185, 232, .82);
}
/* The stack of numbers sits on the centre line, so the copy must stop short of
   it. Without the vw term the 560px block crosses the helix around 1100px.
   Desktop only: below 900px the intro is full-width and centred, and 38vw of a
   phone is 140px of column. */
@media (min-width: 901px) {
  .dnaj--live .dnaj-intro { max-width: min(560px, 38vw); }
}
/* Phone: the opening frame has to hold a lede, two paragraphs, a button, six
   numbers and the control bar inside one viewport, so the copy block is sized
   to the space actually left over and scrolls inside itself if it still runs
   long, rather than sliding under the controls. */
@media (max-width: 900px) {
  .dnaj--live .dnaj-intro {
    top: 84px;
    /* Span the full width so the wash can reach both edges, and hold the copy
       where it already sat with a left pad rather than an offset -- the text
       box is unchanged, only the painted area grows. */
    left: 0;
    right: 0;
    padding: 0 0 0 6vw;
    /* A deep purple wash behind the copy: over the helix the lede was hard to
       read on a phone. This is a background on .dnaj-intro itself rather than
       a separate layer, which is the whole trick -- dna-journey.js already
       drives this element's opacity (introEl.style.opacity = introO), so the
       wash dissolves on exactly the same curve as the copy the moment the
       reader enters the experience, whether they came from Explore Now, Start
       the walkthrough, or tapping a number. No JS change, and no way for the
       two to drift apart. Feathered to transparent so it reads as a haze over
       the 3D rather than a panel sitting on top of it. */
    background:
      radial-gradient(128% 58% at 28% 50%,
        rgba(21, 7, 38, .93) 0%,
        rgba(21, 7, 38, .88) 32%,
        rgba(24, 9, 44, .66) 58%,
        rgba(24, 9, 44, .28) 79%,
        rgba(24, 9, 44, 0) 100%);
    /* Own the whole band between the header and the stepper rather than
       hugging the top of it. Short copy then sits centred in the opening
       frame instead of leaving ~220px of dead space above the numbers;
       long copy still fills the band and scrolls inside itself, because
       `safe` degrades to flex-start the moment the content overflows and
       centring would push the first line out of reach. */
    height: calc(100% - 84px - 152px);
    max-height: none;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Flex would stretch the button to the column width; it is content-sized. */
  .dnaj--live .dnaj-intro > .dnaj-explore { align-self: flex-start; }
  .dnaj-intro h2 { font-size: clamp(26px, 7.4vw, 34px); margin-bottom: 12px; }
  .dnaj-intro p { font-size: 15.5px; line-height: 1.5; }
  .dnaj-intro p.dnaj-intro-note { font-size: 14.5px; margin-top: 20px; }
  .dnaj-explore { margin-top: 16px; }
}

/* ---- the six layers, stacked over the helix on the opening frame ----
   This is the entry point: every number is a direct jump, so reaching 04 no
   longer means watching 01 through 03 first. It exists only in the live WebGL
   path; in the static fallback the six cards are already a list and a second
   set of numbers would just be a duplicate table of contents. */
.dnaj-stack { display: none; }
.dnaj--live .dnaj-stack {
  display: flex;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  flex-direction: column;
  gap: clamp(10px, 1.5vh, 22px);
  transition: opacity .3s ease;
}
.dnaj-stack-item {
  position: relative;
  display: block;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--c);
  -webkit-tap-highlight-color: transparent;
}
.dnaj-stack-n {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: rgba(16, 9, 32, .62);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1), background .22s ease;
}
/* The undulating glow. It rides a ring outside the edge rather than a shadow on
   the disc itself, so the numeral stays crisp while the halo breathes, and each
   item carries a negative --d delay so the column pulses as a travelling wave
   rather than six lamps blinking in unison. */
.dnaj-stack-n::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  color: var(--c);
  opacity: .2;
  box-shadow: 0 0 15px currentColor, inset 0 0 9px currentColor;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .dnaj-stack-n::after {
    animation: dnajStackPulse 3.4s ease-in-out infinite;
    animation-delay: var(--d, 0s);
  }
}
@keyframes dnajStackPulse {
  0%, 100% { opacity: .18; transform: scale(1); }
  50%      { opacity: .78; transform: scale(1.14); }
}
.dnaj-stack-item:hover .dnaj-stack-n,
.dnaj-stack-item:focus-visible .dnaj-stack-n {
  transform: scale(1.1);
  background: rgba(38, 20, 68, .82);
}
.dnaj-stack-item:focus-visible { outline: none; }
.dnaj-stack-item:focus-visible .dnaj-stack-n { outline: 2px solid #fff; outline-offset: 4px; }

/* ---- hover teaser ----
   Always to the right: the intro copy owns the left half of the stage, so a
   left-hand teaser would land on top of it at every width below about 1400px. */
.dnaj-stack-tease {
  position: absolute;
  left: calc(100% + 16px);
  top: 50%;
  width: min(310px, 26vw);
  padding: 12px 15px;
  border-radius: 14px;
  background: rgba(26, 16, 48, .88);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-left: 2px solid var(--c);
  box-shadow: 0 18px 44px rgba(6, 2, 16, .5);
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(-10px);
  transition: opacity .2s ease, transform .2s cubic-bezier(.4, 0, .2, 1);
}
.dnaj-stack-t {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  margin-bottom: 4px;
}
.dnaj-stack-d {
  display: block;
  font-size: 12.8px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
}
@media (hover: hover) and (min-width: 901px) {
  .dnaj-stack-item:hover .dnaj-stack-tease,
  .dnaj-stack-item:focus-visible .dnaj-stack-tease {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}
/* No hover on a phone, and no room beside the helix either: the teasers are
   dropped and the numbers become a reachable row above the control bar. */
@media (max-width: 900px) {
  .dnaj--live .dnaj-stack {
    top: auto;
    bottom: 74px;
    transform: translateX(-50%);
    flex-direction: row;
    flex-wrap: nowrap;          /* one row of six: two rows cost 100px of copy */
    justify-content: center;
    gap: 7px;
    max-width: 96vw;
  }
  .dnaj-stack-tease { display: none; }
  .dnaj-stack-n { width: 44px; height: 44px; font-size: 14px; }   /* the 44px tap-target floor */
}

/* ---- stage cards: which products carry this layer ---- */
.dnaj-prods {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
}
.dnaj-prods-h {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.dnaj-prod {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .15);
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
}
.dnaj-prod-mark { display: block; width: 19px; height: 19px; flex: 0 0 auto; }
.dnaj-prod-mark svg { display: block; width: 100%; height: 100%; }

.dnaj-card-ctas { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.dnaj-card-cta, .dnaj-card-cta2 {
  margin-top: 0;
  font-size: 13.5px;
  padding: 11px 17px;
  text-align: center;
  line-height: 1.3;
}
.dnaj-card-cta2 { flex: 0 0 auto; }

/* Six stages of copy, tags, product chips and two CTAs will outgrow a short
   laptop viewport, so the card scrolls inside itself rather than running off
   the stage. */
.dnaj--live .dnaj-card {
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Phone: the stage stacks tile + card + photo down one viewport, so the card's
   share is what is left after the other two. The product chips and second CTA
   added about 120px, which pushed the whole stack off both ends of the screen
   until the cap came down and the photo came in. */
@media (max-width: 900px) {
  .dnaj--live .dnaj-card { max-height: calc(100svh - 270px); }
  .dnaj-card-ctas > .btn { flex: 1 1 100%; }
  .dnaj--live .dnaj-photo,
  .dnaj--live .dnaj-photo--left,
  .dnaj--live .dnaj-photo--right { width: min(150px, 36vw); }
  .dnaj-card p { font-size: 15px; }
  .dnaj-prods { margin-top: 14px; }
  .dnaj-card-ctas { margin-top: 14px; }
}
/* On a phone-height screen the stage has to hold a number, a card that now
   carries product attribution and two CTAs, and the control bar, inside one
   viewport. The stage photo is decoration over a 3D helix that is already
   there, so it is the thing that gives way. Tablets keep it: they have the
   height for all four. */
@media (max-width: 900px) and (max-height: 900px) {
  .dnaj--live .dnaj-photo,
  .dnaj--live .dnaj-photo--left,
  .dnaj--live .dnaj-photo--right { display: none; }
}

/* ---- control bar: Back / Next / Skip ahead ----
   Labelled, not iconographic, and every label carries a dark halo so it stays
   readable wherever the helix and its bokeh happen to be behind it. */
.dnaj-arrow {
  width: auto;
  height: 44px;
  padding: 0 17px 0 13px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
}
.dnaj-arrow-l { font-size: .9rem; font-weight: 700; }
.dnaj-next { display: inline-flex; align-items: center; gap: 8px; }
.dnaj-next svg { width: 18px; height: 18px; flex: 0 0 auto; }
.dnaj-ctl .dnaj-arrow-l,
.dnaj-ctl .dnaj-link {
  text-shadow: 0 1px 10px rgba(6, 3, 14, .95), 0 0 22px rgba(6, 3, 14, .8);
}
/* Phone: one line, not three. The v5 bar dropped the escape links onto their
   own row, which with the stack above it left the opening copy about 140px of
   viewport it did not have. */
@media (max-width: 720px) {
  .dnaj-ctl { bottom: 14px; gap: 8px; flex-wrap: nowrap; max-width: 96vw; }
  .dnaj-esc { width: auto; order: 0; gap: 10px; flex-wrap: nowrap; }
  .dnaj-arrow { height: 40px; padding: 0 12px 0 9px; }
  .dnaj-arrow-l { font-size: .8rem; }
  .dnaj-next { font-size: .84rem; padding: 11px 15px; }
  .dnaj-link { font-size: .78rem; white-space: nowrap; }
}

/* =========================================================================
   MEDICAL NECESSITY CHAIN (/products#medical-necessity)
   The six steps a payer audits against, and which product carries each one.
   ========================================================================= */
.mnchain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
  counter-reset: mnstep;
}
.mnstep {
  display: flex;
  gap: 14px;
  padding: 20px 20px 19px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.mnstep-n {
  flex: 0 0 auto;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .08em;
  line-height: 1.5;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.mnstep-b { font-size: .95rem; line-height: 1.58; color: var(--muted); }
.mnstep-b strong { color: var(--ink); font-weight: 700; }

/* which product carries which link in the chain */
.mnmap {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 9px 26px;
}
.mnmap li {
  position: relative;
  padding-left: 32px;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--muted);
}
.mnmap-mark { position: absolute; left: 0; top: .04em; }
.mnmap a { color: var(--ink); text-decoration: none; }
.mnmap a:hover { text-decoration: underline; }

/* =========================================================================
   PRODUCT MARKS IN RUNNING TEXT
   The same marks the product strips carry, at glyph size: at the top of each
   value-chain card, and standing in for the pink bullet in the
   medical-necessity map. Both loop the design system's draw.

   One keyframe does it: draw in, hold drawn for most of the cycle, then trace
   off the far end. Because the dash pattern leaves by the end it arrived at
   rather than rewinding, the loop has no snap-back frame. The stagger comes
   from inline --i, same as the .rmap-tile entry draw on the home page.
   ========================================================================= */
.vchain-mark, .mnmap-mark { display: block; line-height: 0; }
.vchain-mark svg { display: block; width: 40px; height: 40px; }
@media (max-width: 560px) { .vchain-mark svg { width: 32px; height: 32px; } }
.mnmap-mark svg { display: block; width: 21px; height: 21px; }

@media (prefers-reduced-motion: no-preference) {
  /* the hold is the long part on purpose: at bullet size a mark caught
     mid-draw reads as broken, not as motion. Drawn ~2/3 of the cycle. */
  @keyframes markTrace {
    0%   { stroke-dashoffset: 100; }
    20%  { stroke-dashoffset: 0; }
    86%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -100; }
  }
  @keyframes markTraceDot {
    0%, 14%   { opacity: 0; transform: scale(.4); }
    24%, 86%  { opacity: 1; transform: scale(1); }
    100%      { opacity: 0; transform: scale(.4); }
  }
  .vchain-mark .mk-s, .mnmap-mark .mk-s {
    stroke-dasharray: 100;
    animation: markTrace 5.2s cubic-bezier(.5, 0, .3, 1) infinite;
    animation-delay: calc(var(--i, 0) * 200ms);
  }
  .vchain-mark .mk-d, .mnmap-mark .mk-d {
    transform-box: fill-box;
    transform-origin: center;
    animation: markTraceDot 5.2s ease infinite;
    animation-delay: calc(var(--i, 0) * 200ms);
  }
}

/* Without the photo heads the value-chain cards are short, so the stock
   88px + 88px between sections left the row stranded above "Available
   today". Pull the seam in to 120px total. */
#value-chain { padding-bottom: 56px; }
#value-chain + .section { padding-top: 64px; }

/* ---- product value card: Book a Demo + Learn More ---- */
.pvalue-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.pvalue-cta .btn { padding: 12px 22px; font-size: .94rem; }
@media (max-width: 620px) {
  .pvalue-cta .btn { flex: 1 1 100%; text-align: center; }
}

/* ---- "Learn More" modal (products.html) ----
   A light card on a dark page, on purpose: the HubSpot form paints inside its
   own iframe with HubSpot's light-surface styling, so dark text on white is
   the only surface it is guaranteed to read on. Same reasoning as .cust. */
html:has(.lm-modal[open]) { overflow: hidden; }
.lm-modal {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: #fff;
  color: #2b2233;
  /* alt.css re-points --ink for the dark page; this card is a light surface */
  --ink: #2b2233;
  box-shadow: 0 30px 80px rgba(20, 6, 40, .55);
  overflow: auto;
  overscroll-behavior: contain;
}
.lm-modal::backdrop { background: rgba(16, 6, 30, .72); backdrop-filter: blur(4px); }
.lm-card { position: relative; padding: 40px 40px 32px; }
.lm-card .eyebrow { margin-bottom: 10px; }
.lm-title {
  margin: 0 0 12px;
  padding-right: 36px;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  background: var(--text-grad-cool);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.lm-modal .lm-intro { margin: 0 0 22px; color: #4f4a54; font-size: 1.02rem; line-height: 1.6; }
.lm-close {
  position: absolute; top: 18px; right: 18px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: #f3edf7; color: #6A2C74;
  cursor: pointer;
  transition: background .18s ease;
}
.lm-close:hover, .lm-close:focus-visible { background: #e6d8ef; }
.lm-close:focus-visible { outline: 2px solid #BF56C2; outline-offset: 2px; }
.lm-close svg { width: 20px; height: 20px; }
.lm-form { min-height: 320px; position: relative; }
.lm-form[data-state="loading"]::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 14px;
  background: linear-gradient(100deg, #f5f0f8 30%, #fbf8fd 50%, #f5f0f8 70%) 0 0 / 200% 100%;
  animation: lmShimmer 1.4s linear infinite;
}
@keyframes lmShimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .lm-form[data-state="loading"]::before { animation: none; } }
.lm-form[data-state="ready"] { min-height: 0; }
.lm-modal .lm-fallback { display: none; margin: 16px 0 0; font-size: .92rem; color: #6E6779; position: relative; }
.lm-modal .lm-fallback a { color: #6A2C74; }
.lm-form[data-state="slow"]::before { display: none; }
.lm-modal .lm-form[data-state="slow"] .lm-fallback { display: block; }
@media (max-width: 620px) {
  .lm-card { padding: 30px 20px 24px; }
  .lm-close { top: 12px; right: 12px; }
}

/* UserWay trigger: UserWay paints a solid inline !important background (set
   via data-color on the embed), so the brand gradient rides on a pseudo-element
   above it. White ring + glow keep it findable on the dark hero. */
.uwy .userway_buttons_wrapper .uai {
  box-shadow: 0 0 0 2px #fff, 0 0 18px 4px rgba(200, 53, 248, .55) !important;
}
.uwy .userway_buttons_wrapper .uai::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #D24BFF 0%, #A13DFB 50%, #6E4DFF 100%);
  pointer-events: none;
}
.uwy .userway_buttons_wrapper .uai .uiiw { position: relative; z-index: 1; }
/* hover brightens the glow, not the fill, so white-on-purple stays above 3:1 */
.uwy .userway_buttons_wrapper .uai:hover,
.uwy .userway_buttons_wrapper .uai:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 24px 7px rgba(210, 75, 255, .75) !important;
}

/* ============================================================
   Closed campaign pages (private-practice-campaign-lp/)
   No site navigation: logo left, Book a Demo right, at every width.
   style.css hides .nav-actions .btn under 960px because the demo link
   normally lives behind the hamburger; here there is no hamburger.
   ============================================================ */
.nav--closed { display: flex; justify-content: space-between; }
.nav--closed .nav-actions .btn { display: inline-flex; }
@media (max-width: 560px) {
  .nav--closed .nav-actions .btn { padding: 10px 16px; font-size: .84rem; }
}
.site-footer--closed .foot-brand { max-width: 520px; margin: 0 auto; text-align: center; }
.site-footer--closed .foot-brand .brand img { margin: 0 auto; }
.site-footer--closed .foot-brand p { margin-left: auto; margin-right: auto; }
.foot-legal { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin: 20px 0 0; font-size: .85rem; }
.foot-legal a { color: rgba(255, 255, 255, .72); }
.foot-legal a:hover,
.foot-legal a:focus-visible { color: #fff; }