/* ==========================================================================
   Nexal Health AI - custom layer on top of Bootstrap 5.3
   Kept intentionally small: Bootstrap variables + utilities do the heavy work.
   ========================================================================== */

/* ---- 1. Design tokens (also re-map Bootstrap variables) ----------------- */
:root {
  --nx-navy:  #0A1F3D;
  --nx-navy-2:#132A4A;
  --nx-teal:  #1B6F80;
  --nx-teal-d:#155A68;
  --nx-mint:  #4FB3BF;
  --nx-soft:  #F4F8F9;
  --nx-line:  #E3E9EB;
  --nx-body:  #5A6579;

  /* Bootstrap overrides */
  --bs-primary: #1B6F80;
  --bs-primary-rgb: 27, 111, 128;
  --bs-body-color: var(--nx-body);
  --bs-body-color-rgb: 90, 101, 121;
  --bs-heading-color: var(--nx-navy);
  --bs-border-color: var(--nx-line);
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.6;
  --bs-link-color-rgb: 27, 111, 128;
  --bs-link-hover-color-rgb: 21, 90, 104;
  --bs-border-radius-lg: .75rem;
  --bs-border-radius-xl: 1rem;
  --bs-emphasis-color: var(--nx-navy);
}

/* ---- 2. Base ------------------------------------------------------------ */
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }

h1, h2, h3, h4, h5, h6,
.navbar-brand, .btn, .stat-value {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  letter-spacing: -.02em;
}
h1, h2, h3, h4, h5, h6 { font-weight: 800; }

/* Page shell: 78rem wide with a 1.25rem gutter, matching the reference site */
.container { --bs-gutter-x: 2.5rem; max-width: 78rem; }

/* Vertical rhythm for every band of the page */
.section    { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section-sm { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.bg-soft    { background: var(--nx-soft); }
.bg-navy    { background: var(--nx-navy); }

/* Type helpers */
.eyebrow {
  font-size: .75rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--nx-teal); margin-bottom: .9rem;
}
.eyebrow-light { color: var(--nx-mint); }
.h-hero    { font-size: clamp(2.25rem, 4.4vw, 3.75rem); line-height: 1.05; }
.h-section { font-size: clamp(1.75rem, 3.1vw, 2.6rem); line-height: 1.25; }
.h-card    { font-size: 1.125rem; line-height: 1.55; }
.lead-nx   { font-size: 1.0625rem; line-height: 1.7; }
.small-nx  { font-size: .875rem; line-height: 1.625; }
.p-card    { padding: clamp(1.5rem, 2vw, 1.75rem); }
.measure   { max-width: 42rem; }
.measure-lg{ max-width: 52rem; }
.text-mint { color: var(--nx-mint) !important; }
.text-navy { color: var(--nx-navy) !important; }

/* ---- 3. Buttons --------------------------------------------------------- */
.btn { font-weight: 600; font-size: .9375rem; padding: .65rem 1.4rem; }
.btn-lg { padding: .8rem 1.75rem; font-size: 1rem; }
.btn-primary {
  --bs-btn-bg: var(--nx-teal);            --bs-btn-border-color: var(--nx-teal);
  --bs-btn-hover-bg: var(--nx-teal-d);    --bs-btn-hover-border-color: var(--nx-teal-d);
  --bs-btn-active-bg: #124F5C;            --bs-btn-active-border-color: #124F5C;
  --bs-btn-disabled-bg: var(--nx-teal);   --bs-btn-disabled-border-color: var(--nx-teal);
}
.btn-ghost {
  --bs-btn-color: var(--nx-navy);         --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--nx-line);  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-color: var(--nx-teal);   --bs-btn-hover-border-color: var(--nx-teal);
}
.btn-ghost-light {
  --bs-btn-color: #fff;                            --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(255,255,255,.35);    --bs-btn-hover-bg: rgba(255,255,255,.1);
  --bs-btn-hover-color: #fff;                      --bs-btn-hover-border-color: rgba(255,255,255,.6);
}
.link-arrow {
  font-weight: 600; font-size: .9375rem; text-decoration: none;
  color: var(--nx-teal); display: inline-flex; align-items: center; gap: .45rem;
}
.link-arrow i { transition: transform .25s ease; }
.link-arrow:hover i { transform: translateX(4px); }

/* ---- 4. Cards, chips, icons -------------------------------------------- */
.card-nx {
  background: #fff; border: 1px solid var(--nx-line); border-radius: 1.375rem;
  box-shadow: 0 1px 2px rgba(10,31,61,.06), 0 12px 32px -12px rgba(10,31,61,.18);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
a.card-nx { text-decoration: none; }
a.card-nx:hover, .card-nx.is-hoverable:hover {
  border-color: #CFE0E4; transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(10,31,61,.05), 0 22px 40px -26px rgba(10,31,61,.4);
}
.card-dark {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 1.375rem;
}
.icon-badge {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: #E3F1F3; color: var(--nx-teal); font-size: 1.05rem;
}
.icon-badge-navy { background: var(--nx-navy); color: #fff; }
.chip {
  display: inline-block; padding: .4rem .85rem; border-radius: 999px;
  background: #EEF4F6; color: var(--nx-navy); font-size: .8125rem; font-weight: 600;
}
.badge-pill-outline {
  display: inline-flex; align-items: center; gap: .5rem; padding: .45rem 1rem;
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px; color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.badge-pill-outline.on-light { border-color: var(--nx-line); color: var(--nx-navy); background: #fff; }
.stat-value { font-size: 1.125rem; font-weight: 800; color: var(--nx-navy); line-height: 1.55; }
.stat-label { font-size: .78125rem; color: var(--nx-body); }

/* ---- 5. Header ---------------------------------------------------------- */
/* The partial is injected into #site-header, so the STICKY must live on that
   wrapper — a sticky child can only stick within its parent's box, and the
   wrapper is only as tall as the bar itself. */
#site-header { position: sticky; top: 0; z-index: 1030; }

.nx-navbar {
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--nx-line);
  transition: box-shadow .25s ease;
}
.nx-navbar > .container { padding-block: .875rem; }
.nx-navbar.is-stuck { box-shadow: 0 8px 30px -20px rgba(10,31,61,.5); }
.nx-navbar .navbar-brand img { height: 40px; width: auto; }
.nx-navbar .navbar-nav .nav-link {
  font-size: .875rem; font-weight: 500; color: var(--nx-navy);
  padding-inline: 1rem;
  display: inline-flex; align-items: center; gap: .3rem;
}
.nx-navbar .nav-link:hover, .nx-navbar .nav-link.active { color: var(--nx-teal); }
/* replace Bootstrap's solid triangle caret with a chevron (matches reference) */
.nx-navbar .dropdown-toggle::after { display: none; }
.nx-navbar .dropdown-toggle .bi { font-size: .8em; }

.nx-navbar .dropdown-menu {
  border: 0; border-radius: 1.375rem; padding: .75rem;
  box-shadow: 0 1px 2px rgba(10,31,61,.06), 0 24px 60px -20px rgba(10,31,61,.35);
  min-width: 20rem;
}
.nx-navbar .dropdown-item { border-radius: .75rem; padding: .6rem .8rem; white-space: normal; }
.nx-navbar .dropdown-item:hover, .nx-navbar .dropdown-item:focus { background: var(--nx-soft); }
.nx-navbar .dropdown-item strong { display: block; color: var(--nx-navy); font-weight: 700; font-size: .875rem; }
.nx-navbar .dropdown-item span   { display: block; color: var(--nx-body); font-size: .75rem; line-height: 1.5; }

@media (min-width: 992px) {
  /* Stretch the nav items to the full height of the bar so the menu can hang
     off the header's bottom edge instead of off the link text. */
  .nx-navbar .navbar-collapse { align-self: stretch; }
  .nx-navbar .navbar-nav { align-items: stretch; }
  .nx-navbar .navbar-nav > .nav-item { display: flex; align-items: center; }

  .nx-navbar .dropdown-menu {
    /* item bottom + the bar's padding-bottom + its 1px border */
    top: calc(100% + .875rem + 1px);
    margin-top: 0;
    animation: nx-drop .2s ease-out;
  }
  /* invisible bridge across the gap, so the menu does not close while the
     pointer travels from the link down to the panel */
  .nx-navbar .nav-item.dropdown .dropdown-menu::before {
    content: ""; position: absolute; left: 0; right: 0;
    top: calc(-.875rem - 2px); height: calc(.875rem + 2px);
  }
  .nav-hover-open:hover > .dropdown-menu { display: block; }
}
@keyframes nx-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (max-width: 991.98px) {
  .nx-navbar .navbar-collapse { padding-block: 1rem; }
  .nx-navbar .dropdown-menu { border: 0; box-shadow: none; padding-inline: 0; min-width: 0; }
}

/* ---- 6. Hero ------------------------------------------------------------ */
.hero {
  position: relative; background: var(--nx-navy) center/cover no-repeat;
  color: #fff; isolation: isolate;
  padding-block: clamp(4rem, 9.5vw, 8.5rem);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(8,24,46,.94) 0%, rgba(8,24,46,.86) 38%, rgba(10,31,61,.45) 100%);
}
.hero h1, .hero h2, .hero h3 { color: #fff; }
.hero p { color: rgba(255,255,255,.82); }
.hero-strip {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  border-radius: 1.625rem; padding: 1.25rem 1.5rem;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero-strip .strip-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
}
.hero-strip .strip-label {
  flex: 0 0 auto; max-width: 9rem; margin: 0;
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; line-height: 1.5;
  text-transform: uppercase; color: rgba(255,255,255,.6);
}
.hero-media { border-radius: 1rem; box-shadow: 0 40px 80px -40px rgba(0,0,0,.85); }

/* ---- 7. Dark sections & footer ------------------------------------------ */
.bg-navy, .bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4, .bg-navy h5 { color: #fff; }
.bg-navy p, .bg-navy li { color: rgba(255,255,255,.72); }
.nx-footer { background: var(--nx-navy); color: rgba(255,255,255,.7); border-top: 1px solid var(--nx-line); }
.nx-footer img { height: 44px; }
.nx-footer h6 {
  color: rgba(255,255,255,.55); font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.1rem;
}
.nx-footer a { color: rgba(255,255,255,.78); text-decoration: none; font-size: .9375rem; }
.nx-footer a:hover { color: #fff; }
.nx-footer .footer-list li { margin-bottom: .7rem; }
.nx-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); }

/* ---- 8. Misc components ------------------------------------------------- */
.flow-step {
  display: flex; align-items: center; gap: .85rem; padding: .8rem 1.1rem;
  background: var(--nx-soft); border-radius: .7rem; font-weight: 600;
  color: var(--nx-navy); font-size: .9375rem;
}
.flow-step .num { color: var(--nx-teal); font-size: .8125rem; font-weight: 700; }
.timeline { position: relative; padding-left: 1.75rem; }
.timeline::before { content: ""; position: absolute; left: .28rem; top: .5rem; bottom: .5rem; width: 1px; background: var(--nx-line); }
.timeline-item { position: relative; padding-bottom: 2.25rem; }
.timeline-item::before {
  content: ""; position: absolute; left: -1.75rem; top: .45rem;
  width: .6rem; height: .6rem; border-radius: 50%; background: var(--nx-teal);
}
.accordion-nx .accordion-item { border: 0; border-bottom: 1px solid var(--nx-line); background: transparent; }
.accordion-nx .accordion-button {
  background: transparent; box-shadow: none; padding-inline: 0; font-weight: 700;
  color: var(--nx-navy); font-family: "Plus Jakarta Sans", sans-serif;
}
.accordion-nx .accordion-button:not(.collapsed) { color: var(--nx-teal); }
.accordion-nx .accordion-body { padding-inline: 0; }
.form-control, .form-select {
  border-color: var(--nx-line); border-radius: .55rem; padding: .6rem .85rem; font-size: .9375rem;
}
.form-control:focus, .form-select:focus { border-color: var(--nx-mint); box-shadow: 0 0 0 .2rem rgba(79,179,191,.2); }
.form-label { font-size: .875rem; font-weight: 500; color: var(--nx-navy); margin-bottom: .35rem; }
.ratio-media img { object-fit: cover; width: 100%; height: 100%; }

/* ---- 9. Preloader ------------------------------------------------------- */
#nx-loader {
  position: fixed; inset: 0; z-index: 2000; background: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .45s ease, visibility .45s ease;
}
#nx-loader.is-hidden { opacity: 0; visibility: hidden; }
.nx-spinner { position: relative; width: 104px; height: 104px; display: grid; place-items: center; }
.nx-spinner::before, .nx-spinner::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent;
}
.nx-spinner::before { border-color: rgba(27,111,128,.14); }
.nx-spinner::after {
  border-top-color: var(--nx-teal); border-right-color: var(--nx-mint);
  animation: nx-spin 1s linear infinite;
}
.nx-spinner img { width: 72px; height: auto; }
@keyframes nx-spin { to { transform: rotate(360deg); } }

/* ---- 10. Scroll reveal -------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .nx-spinner::after { animation: none; }
}

/* ---- 11. Back to top ---------------------------------------------------- */
#nx-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0;
  background: var(--nx-teal); color: #fff; display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
  box-shadow: 0 12px 28px -12px rgba(27,111,128,.8);
}
#nx-top.is-in { opacity: 1; visibility: visible; }

/* ---- 12. Home page: 2026 content refresh -------------------------------- */

/* Hero: feature pills and glass badges on the dark hero */
.pill-light {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1.05rem; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: .8125rem; font-weight: 600; line-height: 1.3;
}
.badge-pill-outline.is-glass {
  background: rgba(255,255,255,.09);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* Growth engine: five opportunity types orbiting "More Patient Visits" */
.ge-orbit {
  position: relative; display: grid; gap: 2.4rem 0; align-items: center;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: ".  top ." "l1 hub r1" "l2 hub r2";
}
.ge-opp {
  position: relative; z-index: 2; display: flex; align-items: center; gap: .85rem;
  padding: .7rem 1.1rem .7rem .7rem; border-radius: 2rem;
  background: #fff; border: 1px solid #EEF3F5;
  box-shadow: 0 14px 34px -22px rgba(10,31,61,.35), 0 2px 6px -4px rgba(10,31,61,.08);
}
.ge-opp.is-top { grid-area: top; justify-self: center; transform: translateX(0rem); margin-bottom: -1rem;}
.ge-opp.is-l1  { grid-area: l1; justify-self: start; }
.ge-opp.is-l2  { grid-area: l2; justify-self: start; transform: translateX(.6rem); }
.ge-opp.is-r1  { grid-area: r1; justify-self: end; }
.ge-opp.is-r2  { grid-area: r2; justify-self: end; transform: translateX(-.6rem); }
.ge-opp .ic {
  width: 3.25rem; height: 3.25rem; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #EEFAF7 0%, #DDF3EE 100%);
  box-shadow: 0 0 0 .3rem rgba(221,243,238,.45);
}
.ge-opp.is-violet .ic {
  background: radial-gradient(circle at 50% 40%, #F3F2FD 0%, #E4E4F8 100%);
  box-shadow: 0 0 0 .3rem rgba(228,228,248,.5);
}
.ge-opp .ic img { width: 58%; height: auto; display: block; }
.ge-opp h3 { font-size: .9rem; margin: 0 0 .2rem; }
.ge-opp p  { font-size: .76rem; line-height: 1.5; margin: 0; color: var(--nx-body); max-width: 9.5rem; }
.ge-hub {
  position: relative; z-index: 1; grid-area: hub; justify-self: center;
  width: 13.5rem; aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(circle, #EEF9F7 0%, #E6F6F3 52%, rgba(230,246,243,.55) 63%, rgba(230,246,243,0) 71%);
}
.ge-hub > img { width: 4.8rem; height: auto; display: block; margin-bottom: .55rem; }
.ge-hub p {
  margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800;
  font-size: 1.1rem; line-height: 1.3; color: var(--nx-navy);
}
/* dotted orbit: centred on the hub, passes behind the cards, fades out below */
.ge-ring {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: -1;
  width: 25rem; height: 25rem; color: #6FC7BC; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 70%, transparent 92%);
          mask-image: linear-gradient(#000 70%, transparent 92%);
}
.ge-tagline {
  display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin: 2.25rem 0 0;
  font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--nx-teal); text-align: center;
}
.ge-tagline::before, .ge-tagline::after { content: ""; flex: 0 1 4rem; height: 1px; background: #8FCBD3; }
@media (max-width: 575.98px) {
  .ge-orbit { grid-template-columns: 1fr; grid-template-areas: "hub" "top" "l1" "r1" "l2" "r2"; gap: .9rem; }
  .ge-opp[class*="is-"] { justify-self: stretch; transform: none; margin-bottom: 0; }
  .ge-opp p { max-width: none; }
  .ge-ring { display: none; }
  .ge-tagline::before, .ge-tagline::after { display: none; }
}

/* Platform: the two journey-completion rows under the product cards */
.outcome-row {
  display: flex; align-items: center; gap: .9rem;
  padding: .95rem 1.25rem; border-radius: 1.125rem;
  background: #fff; border: 1px solid var(--nx-line);
  color: var(--nx-navy); font-weight: 700; font-size: 1.0625rem;
  box-shadow: 0 1px 2px rgba(10,31,61,.05);
}
.outcome-row.is-green { background: #F3FBF7; border-color: #D9F0E4; }
.outcome-row.is-green .icon-badge { background: #DBF3E7; color: #1F8A55; }

/* ---- 13. Home diagrams — built to the supplied designs ------------------ */

:root {
  --nx-cyan:    #37B6CE;
  --nx-green:   #2DA86E;
  --nx-green-d: #14704A;
  --nx-green-l: #C9F2DD;
  --nx-blue:    #2C5E9E;
  --nx-blue-l:  #DCE6F7;
  --nx-mint-l:  #E3F1F3;
  --nx-grey-k:  #8A94A6;
}

/* shared */
.dg-arrow    { display: flex; justify-content: center; color: var(--nx-cyan); font-size: 1.35rem; line-height: 1; }

/* ===================== Growth engine: the AI flow ======================== */
.ge-bar {
  background: linear-gradient(135deg, #0B2340 0%, #123A5E 100%);
  border-radius: 1.75rem; padding: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: 0 24px 48px -28px rgba(10,31,61,.75);
}
.ge-bar .eyebrow { color: var(--nx-cyan); letter-spacing: .22em; margin-bottom: 1rem; }
.ge-track { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ge-node {
  flex: 1 1 9rem; display: flex; align-items: center; gap: .7rem;
  padding: .7rem 1.15rem; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13);
  color: #fff; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 1rem;
}
.ge-node .n {
  width: 2.05rem; height: 2.05rem; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--nx-cyan); color: #06263A; font-size: .75rem; font-weight: 800;
}
.ge-join { flex: 0 0 2.5rem; height: 1px; background: rgba(255,255,255,.28); position: relative; }
.ge-join::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: .45rem; height: .45rem; border-radius: 50%; background: var(--nx-cyan);
}
@media (max-width: 767.98px) { .ge-join { display: none; } .ge-node { flex: 1 1 100%; } }

.ge-stack { max-width: 52rem; margin-inline: auto; gap: .15rem; }
.ge-stack .dg-arrow { margin: -.1rem 0; }
.dg-arrow svg { width: 1.05rem; height: auto; display: block; }
.ge-row {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  padding: .7rem 1.1rem; border-radius: 1.1rem;
  background: #fff; border: 1px solid #EDF1F4;
  box-shadow: 0 10px 30px -22px rgba(10,31,61,.45);
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800;
  font-size: clamp(.95rem, 1.5vw, 1.15rem); color: var(--nx-navy);
}
.ge-row .ic {
  width: 2.9rem; height: 2.9rem; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; background: #DBE9F8;
}
.ge-row .ic img { width: 80%; height: auto; display: block; }
.ge-row.is-green      { background: #F1FBF6; border-color: #D4EFE1; }
.ge-row.is-green .ic  { background: #CFF0DF; color: var(--nx-green-d); }
@media (max-width: 575.98px) { .ge-row { font-size: 1rem; padding: .9rem 1rem; } }

/* ======================= Capacity: week comparison ======================= */
.cap-card {
  background: #fff; border: 1px solid #E8EEF3; border-radius: 1.5rem;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  box-shadow: 0 14px 40px -28px rgba(10,31,61,.5); height: 100%;
}
.cap-tag {
  display: inline-block; padding: .55rem 1.5rem; border-radius: .65rem;
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
.cap-tag.is-navy { background: var(--nx-navy); }
.cap-tag.is-teal { background: linear-gradient(100deg, #13646F 0%, #2FBF8F 100%); }
.cap-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.cap-ic {
  width: 3rem; height: 3rem; border-radius: .85rem; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 1.3rem;
}
.cap-ic.is-blue  { background: #E4ECF9; color: var(--nx-blue); }
.cap-ic.is-green { background: #D6F2E4; color: var(--nx-green-d); }
.cap-kpi { min-width: 9rem; }
.cap-kpi + .cap-kpi { border-left: 1px solid var(--nx-line); padding-left: 1.25rem; }
.cap-kpi .lbl { font-size: .8rem; color: var(--nx-body); margin-bottom: .15rem; }
.cap-num {
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; color: var(--nx-navy);
  font-size: clamp(1.9rem, 3.1vw, 2.6rem); line-height: 1.1; margin: 0;
}
.cap-num.is-green { color: var(--nx-green-d); }
.cap-num small { font-size: 1.05rem; font-weight: 600; color: var(--nx-body); margin-left: .2rem; }
.cap-note {
  display: inline-flex; align-items: center; gap: .5rem; margin: .15rem 0 0;
  padding: .4rem .75rem; border-radius: .6rem; background: #F2F6F9;
  font-size: .85rem; font-weight: 600; color: var(--nx-navy);
}
@media (max-width: 575.98px) { .cap-kpi + .cap-kpi { border-left: 0; padding-left: 0; } }

.sched-wrap { overflow-x: auto; margin-top: 1.25rem; }
.sched { width: 100%; min-width: 23rem; border-collapse: separate; border-spacing: .28rem; }
.sched thead th {
  font-family: "Inter", sans-serif; font-size: .76rem; font-weight: 700; color: var(--nx-navy);
  text-align: center; padding-bottom: .6rem; border-bottom: 1px solid var(--nx-line);
}
.sched thead th span { display: block; font-weight: 400; font-size: .7rem; color: var(--nx-body); }
.sched thead th:first-child { font-weight: 500; color: var(--nx-body); }
.sched tbody th {
  font-size: .72rem; font-weight: 500; color: var(--nx-body);
  text-align: left; padding-right: .4rem; white-space: nowrap;
}
.sched .cell { display: grid; place-items: center; height: 2.15rem; border-radius: .45rem; font-size: .7rem; font-weight: 600; }
.sched .cell.is-open   { border: 1px dashed #C9D6E2; }
.sched .cell.is-booked { background: var(--nx-blue-l); color: #23477E; }
.sched .cell.is-filled { background: var(--nx-green-l); color: var(--nx-green-d); }

.sched-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.sched-legend span { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--nx-body); }
.sw { width: 1.5rem; height: .95rem; border-radius: .3rem; flex: 0 0 auto; }
.sw.is-booked { background: var(--nx-blue-l); }
.sw.is-filled { background: var(--nx-green-l); }
.sw.is-open   { border: 1px dashed #C9D6E2; }

.cap-result { background: #EBF3FC; border: 1px solid #DBE8F6; border-radius: 1.5rem; padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.cap-result .ic {
  width: 3.5rem; height: 3.5rem; border-radius: .9rem; flex: 0 0 auto;
  display: grid; place-items: center; background: #fff;
}
.cap-result .ic img { width: 62%; height: auto; display: block; }
.cap-result h3 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin: 0 0 .25rem; }
.cap-result h3 em { font-style: normal; color: var(--nx-green-d); font-size: 1.35em; }

/* ================= Where patient opportunities get lost ================== */
.opp-card {
  background: #fff; border: 1px solid #EAF0F4; border-radius: 1.5rem;
  padding: clamp(.95rem, 1.6vw, 1.2rem);
  box-shadow: 0 14px 40px -30px rgba(10,31,61,.5); height: 100%;
}
.opp-head { display: flex; align-items: center; gap: .85rem; margin-bottom: 0.55rem; }
.opp-n {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; background: var(--nx-mint-l); color: var(--nx-teal);
  font-family: "Plus Jakarta Sans", sans-serif; font-size: .8rem; font-weight: 800;
}
.opp-head .ic { flex: 0 0 auto; display: grid; place-items: center; }
.opp-head .ic img { width: clamp(2.5rem, 3.9vw, 3.3rem); height: auto; display: block; }
.opp-head h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); margin: 0; }
.opp-split { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6rem; align-items: stretch; }
.opp-box { border-radius: .85rem; padding: .85rem .95rem; }
.opp-box.is-prob { background: #F2F4F8; }
.opp-box.is-role { background: #E7F5F4; }
.opp-box .k { font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .4rem; }
.opp-box.is-prob .k { color: var(--nx-grey-k); }
.opp-box.is-role .k { color: var(--nx-teal); }
.opp-box p { font-size: .82rem; line-height: 1.55; margin: 0; color: var(--nx-body); }
.opp-split .ar { display: grid; place-items: center; color: var(--nx-teal); }
.opp-split .ar svg { width: 1.45rem; height: auto; display: block; }
@media (max-width: 575.98px) {
  .opp-split { grid-template-columns: 1fr; }
  .opp-split .ar { transform: rotate(90deg); }
}

.opp-banner {
  background: linear-gradient(100deg, #0B2340 0%, #1B7F86 55%, #2FBF9E 100%);
  border-radius: 1.5rem; padding: 1.2rem clamp(1.25rem, 2.5vw, 2rem);
  display: flex; align-items: center; gap: 1.25rem;
}
.opp-banner .chev { color: #9FEAF2; flex: 0 0 auto; display: grid; place-items: center; }
.opp-banner .chev svg { width: 2.2rem; height: auto; display: block; }
.opp-banner .vr   {
  width: 2px; height: 2.4rem; border-radius: 1px;
  background: #9FEAF2; opacity: 1; flex: 0 0 auto;
  margin-left: 1.4rem;
}
.opp-banner p {
  flex: 1; text-align: center; margin: 0; color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800;
  font-size: clamp(.95rem, 1.5vw, 1.15rem);
}
@media (max-width: 767.98px) {
  .opp-banner .chev, .opp-banner .vr { display: none; }
  .opp-banner p { font-size: .95rem; }
}

/* ================= Capabilities: four groups round a hub ================= */
.cap4-card {
  background: #fff; border: 1px solid #EEF2F5; border-radius: 1.4rem;
  padding: clamp(.9rem, 1.5vw, 1.15rem);
  box-shadow: 0 16px 44px -30px rgba(10,31,61,.5); height: 100%;
}
.cap4-card .hd { display: flex; align-items: center; gap: .75rem; margin-bottom: .55rem; }
.cap4-card .ic {
  width: 3rem; height: 3rem; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; background: var(--nx-mint-l);
}
.cap4-card .ic img { width: 88%; height: auto; display: block; }
.cap4-card h3 { font-size: clamp(1.02rem, 1.6vw, 1.22rem); margin: 0; }
.cap4-card ul { list-style: none; margin: 0; padding: 0; }
.cap4-card li { font-size: .875rem; line-height: 1.7; color: var(--nx-body); }

.hub { position: relative; display: grid; place-items: center; padding: 2rem 0; min-height: 16rem; height: 100%; }
/* both cards in a column share the height, so all four end up equal */
@media (min-width: 992px) { .cap-col { height: 100%; grid-template-rows: 1fr 1fr; } }
.hub-core {
  position: relative; z-index: 2;
  width: clamp(9rem, 15vw, 11.5rem); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 24%, #2E7F92 0%, #0E2F52 55%, #081F3B 100%);
  display: grid; place-items: center; text-align: center; color: #fff;
  box-shadow: 0 0 0 .35rem #fff, 0 0 0 .55rem #8FE3F0,
              0 0 2.6rem .7rem rgba(143,227,240,.35),
              0 26px 50px -24px rgba(10,31,61,.55);
}
.hub-core b {
  display: block; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800;
  font-size: clamp(.95rem, 1.5vw, 1.15rem); letter-spacing: .12em; line-height: 1.5;
}
.hub-core i { display: block; width: 2.25rem; height: 3px; border-radius: 2px; background: var(--nx-mint); margin: .6rem auto 0; }
.hub-halo {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  border-radius: 50%; border: 0;
  background: radial-gradient(circle,
              rgba(143,227,240,0) 52%,
              rgba(143,227,240,.22) 68%,
              rgba(143,227,240,0) 88%);
  width: clamp(12rem, 20vw, 15.5rem); aspect-ratio: 1;
}
.hub-halo.is-2 {
  width: clamp(15rem, 26vw, 20rem);
  background: radial-gradient(circle,
              rgba(147,184,246,0) 58%,
              rgba(147,184,246,.09) 72%,
              rgba(147,184,246,0) 90%);
}
.hub-links {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: min(129%, 34rem); aspect-ratio: 400/440; pointer-events: none; overflow: visible;
  z-index: 3;
}
@media (max-width: 991.98px) { .hub-links { display: none; } .hub { min-height: 0; padding: 1rem 0; } }

/* ==================== Human + AI: two panels, one bridge ================= */
/* Sizes come from the reference artwork as ratios of card width (card = 803px
   of a 1935px figure), so they hold as the columns scale.
   Stacking: ribbons 1  <  cards 2  <  orb 3. */
@media (min-width: 992px) { .hai-row { --bs-gutter-x: 9rem; } }
.hai-stage { position: relative; }
.hai-row > [class*="col-"] { position: relative; z-index: 2; }

.hai-card {
  background: #fff; border: 1px solid #E8EFF5; border-radius: 1.5rem;
  overflow: hidden; height: 100%; box-shadow: 0 10px 30px -26px rgba(10,31,61,.35);
}
.hai-head {
  display: flex; align-items: center; gap: 1.15rem;
  padding: clamp(.85rem, 1.5vw, 1.15rem) clamp(1.4rem, 2.6vw, 2rem);
}
.hai-head.is-mint { background: #E9F6F1; }
.hai-head.is-blue { background: #E8F0FB; }
.hai-head .ic {
  width: clamp(3.4rem, 6vw, 4.6rem); aspect-ratio: 1; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
}
.hai-head .ic .ico { width: 84%; height: auto; display: block; }
.hai-head.is-mint .ic { background: #DCF0EA; color: #15707A; }
.hai-head.is-blue .ic { background: #DCE8F8; color: var(--nx-blue); }
.hai-head h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); margin: 0 0 .15rem; }
.hai-head p  {
  margin: 0; font-size: .74rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: #8FA0B4;
}

.hai-list { list-style: none; margin: 0; padding: 0 clamp(1.4rem, 2.6vw, 2rem) clamp(.9rem, 1.8vw, 1.2rem); }
.hai-list li {
  display: flex; align-items: center; gap: .8rem; padding: .45rem 0;
  border-bottom: 1px solid #EDF1F5; font-size: clamp(.875rem, 1.3vw, .95rem); color: #24406B;
}
.hai-list li:last-child { border-bottom: 0; }
.hai-list .tick {
  width: 1.2rem; height: 1.2rem; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
}
.hai-list .tick .ico { width: 62%; height: auto; }
.hai-list.is-mint .tick { background: #D9F0E7; color: #1C8A6E; }
.hai-list.is-blue .tick { background: #DBE7F9; color: #3E7CC4; }

/* ribbons: their own layer, tucked behind both cards */
.hai-ribbons {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: 1;
  width: 12rem; height: 6.7rem; opacity: 1; pointer-events: none;
}
/* the orb rides above everything, dead-centre on the row */
.hai-bridge {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.hai-bridge .dots { display: flex; align-items: center; gap: .32rem; }
.hai-bridge .dots i { width: .32rem; height: .32rem; border-radius: 50%; }
.hai-bridge .dots.is-cyan i { background: #7FD9E4; }   /* matches the left band */
.hai-bridge .dots.is-blue i { background: #93B8F0; }   /* matches the right band */
.hai-bridge .orb {
  width: 4.3rem; height: 4.3rem; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  color: var(--nx-teal);
  /* the reference ring runs cyan (lower-left) to blue (upper-right), so the
     border is painted as a gradient via two backgrounds rather than a flat
     border-color, which cannot hold a gradient */
  border: 3px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(45deg, #6FDCE8 0%, #8FB8F6 100%) border-box;
  box-shadow: 0 0 0 .4rem rgba(255,255,255,.95), 0 6px 18px -8px rgba(10,31,61,.25);
}
.hai-bridge .orb .ico { width: 82%; height: auto; }
@media (max-width: 991.98px) { .hai-bridge, .hai-ribbons { display: none; } }

.hai-foot {
  background: #EAF2FC; border: 1px solid #DCE8F6; border-radius: 1.4rem;
  padding: 1.5rem clamp(1.25rem, 2.5vw, 2rem);
  display: flex; align-items: center; justify-content: center; gap: 1.75rem; text-align: center;
}
.hai-foot .ic { color: var(--nx-navy); flex: 0 0 auto; display: grid; place-items: center; }
.hai-foot .ic .ico { width: clamp(3rem, 4.5vw, 4rem); height: auto; display: block; }
.hai-foot .vr { width: 1px; height: 2.6rem; background: #A9C3DC; opacity: 1; flex: 0 0 auto; }
.hai-foot p {
  margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800;
  font-size: clamp(1rem, 1.7vw, 1.25rem); color: var(--nx-navy);
}
@media (max-width: 575.98px) {
  .hai-foot { gap: 1rem; padding: 1.25rem; }
  .hai-foot .vr { display: none; }
}

/* =============== Integration: keep your EHR, add the layer =============== */
.int-row {
  display: flex; align-items: center; gap: .6rem; padding: .85rem .95rem; border-radius: 1.1rem;
  background: #fff; border: 1px solid #EDF1F5; box-shadow: 0 10px 28px -24px rgba(10,31,61,.5);
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; color: var(--nx-navy);
  font-size: clamp(.82rem, 1.25vw, .98rem);
}
.int-row .n {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  background: #E4EDF9; color: var(--nx-blue); font-size: .72rem; font-weight: 800;
}
.int-row .ic { font-size: 1.6rem; color: var(--nx-navy); line-height: 1; flex: 0 0 auto; }
.int-row.is-active {
  background: linear-gradient(100deg, #0B2340 0%, #1C7E8C 60%, #2AA7A5 100%);
  border-color: transparent; color: #fff; box-shadow: 0 18px 36px -22px rgba(10,31,61,.8);
}
.int-row.is-active .n  { background: var(--nx-mint); color: #06263A; }
.int-row.is-active .ic { color: #fff; }
.int-icons { display: flex; align-items: center; gap: .12rem; color: var(--nx-teal); flex: 0 0 auto; }
/* the label has to hold one line at desktop without shrinking its type */
@media (min-width: 992px) { .int-row .lbl { white-space: nowrap; } }

.ecw-card {
  background: #fff; border: 1px solid #EAF0F5; border-radius: 1.5rem;
  padding: clamp(1.1rem, 1.9vw, 1.5rem); height: 100%;
  box-shadow: 0 16px 44px -30px rgba(10,31,61,.5);
}
.ecw-card .hd { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.ecw-card .hd .ic {
  width: 3.4rem; height: 3.4rem; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; background: #E4EDF9; color: var(--nx-blue); font-size: 1.5rem;
}
.ecw-card .hd h3 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); margin: 0; }
.ecw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.5rem; margin: 1.5rem 0; }
.ecw-grid > div { display: flex; align-items: center; gap: .7rem; font-size: .92rem; color: var(--nx-body); }
.ecw-grid > div i { color: var(--nx-teal); font-size: 1.3rem; flex: 0 0 auto; }
@media (min-width: 576px) { .ecw-grid > div:nth-child(2n) { border-left: 1px solid var(--nx-line); padding-left: 1.5rem; } }
@media (max-width: 575.98px) { .ecw-grid { grid-template-columns: 1fr; } }

@media (min-width: 992px) {
  .int-wrap { position: relative; }
  .int-link {
    position: absolute; top: 2.1rem; left: calc(50% - 1.6rem); width: 3.2rem;
    border-top: 2px dashed var(--nx-mint);
  }
  .int-link::before, .int-link::after {
    content: ""; position: absolute; top: -5px; width: 8px; height: 8px;
    border-radius: 50%; background: var(--nx-mint);
  }
  .int-link::before { left: -4px; }
  .int-link::after  { right: -4px; }
}

/* Integration: cropped icon artwork + tighter flow stack */
.int-stack { display: grid; gap: .1rem; }        /* arrow sits right under the card above */
.int-stack .dg-arrow { margin: -.15rem 0; }
.int-row .ic { flex: 0 0 auto; display: grid; place-items: center; }
.int-row .ic img { height: clamp(1.9rem, 2.9vw, 2.5rem); width: auto; display: block; }
.int-icons img { width: clamp(1.6rem, 2.4vw, 2.1rem); height: auto; display: block; }
.int-icons .plus {
  color: var(--nx-teal); font-weight: 700; font-size: .95rem; line-height: 1;
  margin: 0 .05rem; flex: 0 0 auto;
}
.ecw-card .hd .ic img { width: clamp(2.4rem, 3.6vw, 3.1rem); height: auto; display: block; }
.ecw-i { width: 1.8rem; height: auto; flex: 0 0 auto; display: block; }
.dg-arrow svg { width: 1.05rem; height: auto; display: block; }

/* Outcomes: plain centred columns on navy - the live site uses no cards or
   icons here, just a title and a line of copy per column. */
.bg-navy .out-title {
  font-size: clamp(1.05rem, 1.7vw, 1.28rem); color: var(--nx-mint);
  margin: 0 0 .5rem;
}
.out-desc { font-size: .875rem; line-height: 1.6; color: rgba(255,255,255,.72); }
.out-goal { font-size: 1.0625rem; line-height: 1.7; color: rgba(255,255,255,.8); }

/* Trust: icon, title + line of copy, chevron */
@media (min-width: 1200px) {
  .trust-h { font-size: clamp(1.55rem, 2.1vw, 1.9rem); }
  .trust-h + .lead-nx { font-size: .95rem; }
}
.trust-card {
  display: flex; align-items: center; gap: 1rem; height: 100%;
  background: #fff; border: 1px solid #EAF0F3; border-radius: 1.25rem;
  padding: 1.1rem 1rem 1.1rem 1.1rem;
  box-shadow: 0 12px 30px -24px rgba(10,31,61,.4);
}
.trust-card .ic {
  width: 3.75rem; height: 3.75rem; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #EAF9F6 0%, #DAF3EE 100%);
  box-shadow: 0 0 0 .3rem rgba(218,243,238,.4);
}
.trust-card.is-sky  .ic { background: radial-gradient(circle at 50% 40%, #EDF7FB 0%, #DDEFF6 100%); box-shadow: 0 0 0 .3rem rgba(221,239,246,.45); }
.trust-card.is-blue .ic { background: radial-gradient(circle at 50% 40%, #F1F3FD 0%, #E3E7FA 100%); box-shadow: 0 0 0 .3rem rgba(227,231,250,.5); }
.trust-card .ic img { width: 56%; height: auto; display: block; }
.trust-card > div { flex: 1 1 auto; min-width: 0; }
.trust-card h3 { font-size: .95rem; line-height: 1.35; margin: 0 0 .3rem; }
.trust-card p  { font-size: .8rem; line-height: 1.5; margin: 0; color: var(--nx-body); }
.trust-card .chev { color: #1C9AC9; font-size: 1rem; flex: 0 0 auto; -webkit-text-stroke: .6px currentColor; }
/* beside the heading the cards are narrow, so tighten the icon and padding */
@media (min-width: 1200px) {
  .trust-card { gap: .75rem; padding: .95rem .8rem .95rem .9rem; }
  .trust-card .ic { width: 3.1rem; height: 3.1rem; }
  .trust-card .ic img { width: 62%; }
  .trust-card h3 { font-size: .9rem; }
  .trust-card p  { font-size: .78rem; }
}
@media (max-width: 575.98px) {
  .trust-card { gap: .85rem; padding: .9rem .85rem; }
  .trust-card .ic { width: 3.25rem; height: 3.25rem; }
}

/* How Nexal works: outcome-based payment on a navy panel */
.cm-panel {
  background: #0B2340; border-radius: 1.75rem;
  padding: clamp(1.75rem, 3.4vw, 3rem);
}
.cm-eyebrow { color: rgba(255,255,255,.55); margin-bottom: .85rem; }
.cm-h {
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; color: #fff;
  font-size: clamp(1.5rem, 2.6vw, 2.15rem); line-height: 1.25;
  letter-spacing: -.02em; margin: 0 0 1rem;
}
.cm-lead { color: rgba(255,255,255,.8); font-size: .9375rem; line-height: 1.7; margin: 0 0 1.4rem; }
.cm-pill {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .8rem 1.4rem; border-radius: 999px;
  background: rgba(79,179,191,.12); border: 1px solid rgba(79,179,191,.28);
  color: var(--nx-mint); font-weight: 700; font-size: .9375rem;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.cm-stat {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 1rem; padding: .9rem 1.25rem;
}
.cm-stat + .cm-stat { margin-top: .85rem; }
.cm-stat .k {
  margin: 0 0 .2rem; font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}
.cm-stat .v {
  margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800;
  font-size: 1.25rem; color: #fff;
}

/* ---- 14. Nexal Payments page -------------------------------------------
   The Payments page keeps its own layout - orbit hero, a connected six-step
   track, a phone mock, a dark money band and a pill flow. Every colour,
   font, radius and shadow below comes from the tokens in section 1, so the
   layout is the only thing that differs from the rest of the site.
   ------------------------------------------------------------------------ */
.pay-lead  { font-size: 1.1875rem; line-height: 1.7; color: var(--nx-body); max-width: 42rem; }
.pay-head  { max-width: 47.5rem; margin-bottom: 3rem; }
.pay-head p:not(.eyebrow){ font-size: 1.125rem; color: var(--nx-body); margin-bottom: 0; }

/* --- Hero --------------------------------------------------------------- */
.pay-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  background:
    radial-gradient(circle at 82% 20%, rgba(79,179,191,.16), transparent 26%),
    radial-gradient(circle at 8% 76%, rgba(44,94,158,.07), transparent 23%),
    linear-gradient(180deg, #fff 0%, var(--nx-soft) 100%);
}
.pay-hero::before {
  content: ""; position: absolute; width: 31.25rem; height: 31.25rem; border-radius: 50%;
  right: -15rem; top: -11.25rem; background: rgba(227,241,243,.6);
}
.pay-hero-grid {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: 1.03fr .97fr; gap: 4.4rem; align-items: center;
}
.pay-hero h1 span {
  background: linear-gradient(90deg, var(--nx-teal), var(--nx-mint));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pay-trust {
  display: flex; align-items: center; gap: .6rem; margin-top: 1.5rem;
  font-size: .8125rem; font-weight: 600; color: var(--nx-body);
}
.pay-trust i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--nx-mint); flex: 0 0 auto; }

/* --- Hero orbit --------------------------------------------------------- */
.pay-visual { position: relative; min-height: 32rem; display: flex; align-items: center; justify-content: center; }
.pay-orbit {
  position: absolute; width: 25rem; height: 25rem; border-radius: 50%;
  border: 1px dashed rgba(79,179,191,.6);
}
.pay-orbit::before, .pay-orbit::after {
  content: ""; position: absolute; width: .55rem; height: .55rem; border-radius: 50%; background: var(--nx-mint);
}
.pay-orbit::before { left: 1.7rem;   top: 4.8rem; }
.pay-orbit::after  { right: 1.55rem; bottom: 4.4rem; }

.pay-core {
  position: relative; z-index: 2; width: 15.3rem; height: 15.3rem; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(circle at 45% 35%, #EDF7F8, #D6E9EC 58%, #E7F1F3);
  box-shadow: 0 1.25rem 4rem rgba(27,111,128,.18);
}
.pay-core .ic {
  width: 4.25rem; height: 4.25rem; border-radius: 1.375rem; background: #fff;
  display: grid; place-items: center; margin-bottom: 1rem;
  box-shadow: 0 1px 2px rgba(10,31,61,.06), 0 12px 32px -12px rgba(10,31,61,.18);
}
.pay-core .ic svg { width: 2.1rem; height: 2.1rem; color: var(--nx-teal); }
.pay-core strong {
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -.02em;
  font-size: 1.375rem; line-height: 1.15; color: var(--nx-navy);
}
.pay-core small { margin-top: .5rem; font-size: .8125rem; color: var(--nx-body); }

.pay-float {
  position: absolute; z-index: 3; width: 13.75rem; padding: 1.05rem 1.1rem;
  display: flex; gap: .75rem; align-items: flex-start;
  background: rgba(255,255,255,.95); border: 1px solid var(--nx-line); border-radius: 1.125rem;
  box-shadow: 0 1px 2px rgba(10,31,61,.06), 0 12px 32px -12px rgba(10,31,61,.18);
}
.pay-float.is-top    { top: 1.4rem;    right: .25rem; }
.pay-float.is-left   { top: 11rem;     left: 0; }
.pay-float.is-right  { bottom: 4.5rem; right: -.25rem; }
.pay-float.is-bottom { bottom: .5rem;  left: 1.5rem; }
.pay-float .ic {
  flex: 0 0 2.375rem; width: 2.375rem; height: 2.375rem; border-radius: .75rem;
  display: grid; place-items: center; background: var(--nx-mint-l); color: var(--nx-teal);
}
.pay-float .ic.is-blue  { background: var(--nx-blue-l);  color: var(--nx-blue); }
.pay-float .ic.is-green { background: var(--nx-green-l); color: var(--nx-green-d); }
.pay-float .ic svg { width: 1.25rem; height: 1.25rem; }
.pay-float b    { display: block; font-size: .8125rem; color: var(--nx-navy); margin-bottom: .2rem; }
.pay-float span { display: block; font-size: .6875rem; line-height: 1.35; color: var(--nx-body); }

/* --- The opportunity ---------------------------------------------------- */
.pay-problem-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 5rem; align-items: start; }
.pay-problem-grid .pay-copy p:not(.eyebrow) { font-size: 1.125rem; color: var(--nx-body); }
.pay-points { display: grid; gap: .875rem; }
.pay-point {
  padding: 1.45rem 1.5rem; background: #fff; border: 1px solid var(--nx-line); border-radius: 1.125rem;
  box-shadow: 0 1px 2px rgba(10,31,61,.06), 0 12px 32px -12px rgba(10,31,61,.18);
}
.pay-point strong {
  display: block; margin-bottom: .3rem; color: var(--nx-navy);
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -.02em;
}
.pay-point span { font-size: .875rem; color: var(--nx-body); }

/* --- Workflow track ----------------------------------------------------- */
.pay-workflow {
  background:
    radial-gradient(circle at 15% 20%, rgba(79,179,191,.08), transparent 25%),
    linear-gradient(180deg, var(--nx-soft), #fff);
}
.pay-track { position: relative; margin-top: 3.4rem; }
.pay-line {
  position: absolute; left: 8%; right: 8%; top: 2.95rem; height: 2px;
  background: linear-gradient(90deg, rgba(79,179,191,.35), var(--nx-teal), rgba(79,179,191,.35));
}
.pay-steps { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.pay-step  { text-align: center; }
.pay-step .num {
  position: relative; z-index: 2; width: 5.875rem; height: 5.875rem; margin: 0 auto 1.25rem;
  border-radius: 50%; background: #fff; border: 8px solid var(--nx-mint-l);
  display: grid; place-items: center; color: var(--nx-teal);
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.125rem;
  box-shadow: 0 12px 35px -18px rgba(10,31,61,.6);
}
.pay-step h3 {
  font-size: .875rem; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: .5rem; color: var(--nx-navy);
}
.pay-step p { font-size: .8125rem; line-height: 1.6; color: var(--nx-body); margin: 0 auto; max-width: 9.7rem; }

/* --- Patient experience ------------------------------------------------- */
.pay-patient-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 5rem; align-items: center; }
.pay-phone-wrap { display: flex; justify-content: center; }
.pay-phone {
  width: 19.05rem; padding: .75rem; border-radius: 2.375rem; background: var(--nx-navy);
  box-shadow: 0 30px 70px -30px rgba(10,31,61,.7);
}
.pay-screen { background: var(--nx-soft); border-radius: 1.8rem; padding: 1.15rem .95rem 1.4rem; min-height: 33.4rem; }
.pay-notch  { width: 5.95rem; height: 1.375rem; border-radius: 1.25rem; background: var(--nx-navy); margin: 0 auto 1.15rem; }
.pay-msg {
  background: #fff; border: 1px solid var(--nx-line); border-radius: 1.125rem;
  padding: .95rem; margin-bottom: .75rem; box-shadow: 0 8px 20px -14px rgba(10,31,61,.5);
}
.pay-msg.is-short { max-width: 82%; }
.pay-msg .k { font-size: .6875rem; letter-spacing: .06em; color: var(--nx-grey-k); margin: 0 0 .3rem; }
.pay-msg strong {
  display: block; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -.02em;
  color: var(--nx-navy); font-size: 1rem; margin-bottom: .25rem;
}
.pay-msg p { font-size: .75rem; line-height: 1.55; color: var(--nx-body); margin: 0 0 .75rem; }
.pay-msg p:last-child { margin-bottom: 0; }
.pay-btn {
  display: block; text-align: center; padding: .625rem; border-radius: .625rem;
  background: var(--nx-teal); color: #fff; font-size: .75rem; font-weight: 700; text-decoration: none;
}
.pay-btn:hover { background: var(--nx-teal-d); color: #fff; }
.pay-msg.is-receipt   { background: #EFF9F4; border-color: var(--nx-green-l); }
.pay-msg.is-receipt .k{ color: var(--nx-green-d); }
.pay-card-fields { display: grid; gap: .45rem; }
.pay-card-fields .two { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.pay-card-fields i { display: block; height: 2.2rem; border: 1px solid var(--nx-line); border-radius: .5rem; background: #fff; }

.pay-features { display: grid; gap: 1.15rem; margin-top: 1.9rem; }
.pay-feature  { display: flex; gap: .9rem; align-items: flex-start; }
.pay-feature .tick {
  flex: 0 0 1.75rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-size: .8rem;
  background: var(--nx-mint-l); color: var(--nx-teal); display: grid; place-items: center;
}
.pay-feature strong {
  display: block; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -.02em;
  color: var(--nx-navy); font-size: .9375rem;
}
.pay-feature span { font-size: .8125rem; color: var(--nx-body); }
.pay-note { margin-top: 1.6rem; font-size: .75rem; color: var(--nx-grey-k); }

/* --- Safeguards --------------------------------------------------------- */
.pay-guards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.125rem; }
.pay-guard {
  min-height: 11.5rem; padding: 1.75rem; background: #fff;
  border: 1px solid var(--nx-line); border-radius: 1.375rem;
  box-shadow: 0 1px 2px rgba(10,31,61,.06), 0 12px 32px -12px rgba(10,31,61,.18);
}
.pay-guard .ic {
  width: 3rem; height: 3rem; border-radius: .9375rem; margin-bottom: 1.35rem; font-size: 1.15rem;
  display: grid; place-items: center; background: var(--nx-mint-l); color: var(--nx-teal);
}
.pay-guard:nth-child(3n+2) .ic { background: var(--nx-blue-l);  color: var(--nx-blue); }
.pay-guard:nth-child(3n)   .ic { background: var(--nx-green-l); color: var(--nx-green-d); }
.pay-guard h3 { font-size: 1.125rem; margin-bottom: .5rem; }
.pay-guard p  { font-size: .8125rem; color: var(--nx-body); margin: 0; }

/* --- Money band --------------------------------------------------------- */
.pay-money {
  position: relative; overflow: hidden; display: grid;
  grid-template-columns: 1fr .8fr; gap: 4.4rem; align-items: center; color: #fff;
  padding: clamp(2.25rem, 4vw, 3.6rem) clamp(1.75rem, 4vw, 4rem); border-radius: 2rem;
  background: linear-gradient(135deg, var(--nx-navy), var(--nx-navy-2));
}
.pay-money::after {
  content: ""; position: absolute; width: 22.5rem; height: 22.5rem; border-radius: 50%;
  right: -7.5rem; top: -10.6rem; background: rgba(79,179,191,.18);
}
.pay-money h2 { color: #fff; }
.pay-money p:not(.eyebrow)  { color: rgba(255,255,255,.72); font-size: 1.0625rem; }
.pay-money .kicker { color: #fff; font-weight: 600; margin-bottom: 0; }
.pay-money-cards { position: relative; z-index: 1; display: grid; gap: .875rem; }
.pay-money-card {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.125rem 1.25rem; border-radius: 1rem; font-size: .8125rem; color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
.pay-money-card strong {
  color: var(--nx-mint); text-align: right;
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -.02em;
}

/* --- Built to fit ------------------------------------------------------- */
.pay-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 1.375rem; }
.pay-fit-card {
  padding: clamp(1.75rem, 3vw, 2.375rem); border-radius: 1.5rem; background: #fff;
  border: 1px solid var(--nx-line);
  box-shadow: 0 1px 2px rgba(10,31,61,.06), 0 12px 32px -12px rgba(10,31,61,.18);
}
.pay-fit-card.is-accent { background: linear-gradient(135deg, #EFF7F8, #F4F8F9); }
.pay-fit-card h3 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); margin-bottom: .75rem; }
.pay-fit-card p:not(.eyebrow)  { font-size: 1rem; color: var(--nx-body); margin: 0; }

/* --- Result flow -------------------------------------------------------- */
.pay-result { text-align: center; background: linear-gradient(180deg, var(--nx-soft), #fff); }
.pay-result-flow {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  margin: 3rem auto 2.2rem; max-width: 75rem;
}
/* arrow + pill travel together, so a wrap never leaves an arrow stranded */
.pay-next { display: inline-flex; align-items: center; }
.pay-pill {
  padding: 1rem 1.375rem; border-radius: 999px; background: #fff; border: 1px solid var(--nx-line);
  color: var(--nx-navy); font-weight: 700; font-size: .8125rem;
  box-shadow: 0 1px 2px rgba(10,31,61,.06), 0 12px 32px -12px rgba(10,31,61,.18);
}
.pay-arrow { color: var(--nx-teal); font-size: 1.375rem; padding: 0 .625rem; line-height: 1; }
.pay-closing {
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -.02em;
  font-size: 1.25rem; color: var(--nx-navy); margin: 0;
}

/* --- Closing CTA -------------------------------------------------------- */
.pay-cta-box {
  text-align: center; border-radius: 2.125rem; border: 1px solid var(--nx-line);
  padding: clamp(2.75rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.75rem);
  background:
    radial-gradient(circle at 15% 10%, rgba(79,179,191,.18), transparent 24%),
    radial-gradient(circle at 90% 85%, rgba(44,94,158,.10), transparent 24%),
    linear-gradient(135deg, #EFF7F8, #F4F8F9);
}
.pay-cta-box h2 { max-width: 53rem; margin-inline: auto; }
.pay-cta-box p:not(.eyebrow)  { max-width: 38.75rem; margin: 0 auto 1.75rem; color: var(--nx-body); font-size: 1.0625rem; }
.pay-cta-micro  { margin-top: .875rem !important; font-size: .75rem !important; color: var(--nx-grey-k) !important; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 991.98px) {
  .pay-hero-grid, .pay-problem-grid, .pay-patient-grid, .pay-money { grid-template-columns: 1fr; }
  .pay-hero-grid, .pay-problem-grid, .pay-patient-grid { gap: 2.75rem; }
  .pay-money  { gap: 2rem; }
  .pay-visual { min-height: 29rem; }
  .pay-steps  { grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem; }
  .pay-line   { display: none; }
  .pay-guards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  .pay-steps, .pay-guards, .pay-fit { grid-template-columns: 1fr; }
  .pay-steps { gap: 1.75rem; }
  .pay-step .num { width: 4.9rem; height: 4.9rem; border-width: 6px; }
  .pay-guard { min-height: 0; }
  .pay-visual { min-height: 36rem; }
  .pay-arrow { transform: rotate(90deg); padding: .15rem 0; }
  .pay-result-flow, .pay-next { flex-direction: column; }
  .pay-result-flow { gap: .45rem; }
}
@media (max-width: 575.98px) {
  .pay-visual { min-height: 33rem; transform: scale(.85); transform-origin: center top; }
  .pay-orbit  { width: 21rem; height: 21rem; }
  .pay-float  { width: 12.25rem; }
  .pay-float.is-left { left: -.75rem; } .pay-float.is-right { right: -.75rem; }
}

/* Products-page tile for Payments, standing in until a UI shot exists */
.pay-thumb {
  background: linear-gradient(160deg, var(--nx-soft) 0%, #E7F1F3 100%);
  display: grid; place-items: center; padding: 1.1rem;
}
.pay-thumb .sheet {
  width: 100%; max-width: 15rem; background: #fff; border: 1px solid var(--nx-line);
  border-radius: .9rem; padding: .85rem .9rem;
  box-shadow: 0 18px 34px -24px rgba(10,31,61,.75);
}
.pay-thumb .k {
  font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--nx-teal); margin: 0 0 .35rem;
}
.pay-thumb .amt {
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.5rem;
  color: var(--nx-navy); letter-spacing: -.02em; margin: 0 0 .1rem;
}
.pay-thumb .sub { font-size: .7rem; color: var(--nx-body); margin: 0 0 .7rem; }
.pay-thumb .bar {
  display: block; text-align: center; padding: .45rem; border-radius: .45rem;
  background: var(--nx-teal); color: #fff; font-size: .7rem; font-weight: 700;
}
.pay-thumb .tick {
  display: flex; align-items: center; gap: .35rem; margin-top: .6rem;
  font-size: .66rem; font-weight: 600; color: var(--nx-green-d);
}

/* ---- 15. Nexal CareSense page ------------------------------------------
   Layout pieces for the CareSense story: before/after panels, the event
   rail, the rule builder mock, the workflow simulation, the version
   timeline and the ecosystem row. Colours, type and radii all come from
   the tokens in section 1 - only the layout is new.
   ------------------------------------------------------------------------ */
:root { --nx-amber: #F5843F; }   /* trigger-bolt accent, CareSense builder only */

.eyebrow-dot::before {
  content: ""; display: inline-block; width: .4rem; height: .4rem; border-radius: 50%;
  background: currentColor; margin-right: .6rem; vertical-align: middle; position: relative; top: -1px;
}
.cs-lede { font-size: 1.0625rem; line-height: 1.7; color: var(--nx-body); margin: 0; }
.cs-note {
  text-align: center; margin: 2.25rem 0 0; color: var(--nx-navy);
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -.02em; font-size: 1rem;
}

/* Dark panel, reused across the page */
.cs-panel {
  position: relative; color: #fff; border-radius: 1.375rem;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: linear-gradient(150deg, var(--nx-navy) 0%, #11304F 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 1px 2px rgba(10,31,61,.06), 0 22px 44px -26px rgba(10,31,61,.6);
}
.cs-panel h2, .cs-panel h3, .cs-panel h4 { color: #fff; }
.cs-panel p { color: rgba(255,255,255,.72); }
.cs-panel .eyebrow { color: var(--nx-mint); }

/* Numbered gap cards */
.cs-num {
  display: block; margin-bottom: 1.35rem; color: var(--nx-teal);
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: .75rem; letter-spacing: .14em;
}

/* Chips */
.cs-chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
/* arrow + chip travel together, so a wrap never leaves an arrow stranded */
.cs-pair { display: inline-flex; align-items: center; gap: .5rem; }
.cs-chips .ar { color: var(--nx-teal); font-size: .9rem; line-height: 1; }
.cs-chip {
  display: inline-flex; align-items: center; padding: .45rem .85rem; border-radius: .65rem;
  background: #fff; border: 1px solid var(--nx-line); color: var(--nx-navy);
  font-size: .8125rem; font-weight: 600;
}
.cs-chip.is-soft {
  background: var(--nx-mint-l); border-color: transparent; color: var(--nx-teal);
  border-radius: 999px; font-weight: 500;
}
.cs-chip.is-outline {
  background: transparent; border: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.85);
  border-radius: 999px; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; padding: .55rem 1rem;
}
.cs-panel .cs-chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #fff; }
.cs-panel .cs-chip.is-outline { background: transparent; }
.cs-panel .cs-chips .ar { color: var(--nx-mint); }

/* Before / after */
.cs-before {
  height: 100%; background: var(--nx-soft); border: 1px solid var(--nx-line);
  border-radius: 1.375rem; padding: clamp(1.5rem, 2.4vw, 2rem);
}
.cs-before .quote {
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -.02em;
  color: var(--nx-navy); font-size: 1.0625rem; line-height: 1.45; margin: 0 0 1.25rem;
}

/* Event rail */
.cs-step { border-top: 2px solid var(--nx-line); padding-top: 1.1rem; height: 100%; }
.cs-step.is-active { border-top-color: var(--nx-teal); }
.cs-step .n {
  display: block; color: var(--nx-teal); margin-bottom: .55rem;
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: .75rem;
}
.cs-step h3 { font-size: .9375rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .45rem; }
.cs-step p { font-size: .8125rem; line-height: 1.6; color: var(--nx-body); margin: 0; }

/* IF / AND / THEN / UNLESS */
.cs-logic { display: grid; gap: .75rem; }
.cs-logic-row {
  padding: 1rem 1.25rem; border-radius: .875rem; background: #fff; border: 1px solid var(--nx-line);
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -.02em;
  color: var(--nx-navy); font-size: .9375rem; box-shadow: 0 1px 2px rgba(10,31,61,.05);
}
.cs-logic-row.is-active { background: var(--nx-navy); border-color: var(--nx-navy); color: #fff; }
/* the rows are tabs: reset the button chrome, keep the card look */
button.cs-logic-row {
  width: 100%; text-align: left; cursor: pointer; appearance: none; -webkit-appearance: none;
  font-family: "Plus Jakarta Sans", sans-serif; transition: border-color .2s ease, background .2s ease;
}
button.cs-logic-row:hover { border-color: #CFE0E4; }
button.cs-logic-row.is-active:hover { border-color: var(--nx-navy); }
button.cs-logic-row:focus-visible { outline: 2px solid var(--nx-mint); outline-offset: 2px; }
[role="tabpanel"][hidden] { display: none; }

/* Workflow builder mock */
.cs-builder {
  background: #fff; border: 1px solid var(--nx-line); border-radius: 1.375rem; overflow: hidden;
  box-shadow: 0 1px 2px rgba(10,31,61,.06), 0 22px 44px -28px rgba(10,31,61,.5);
}
.cs-builder-top {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--nx-line);
}
.cs-builder-top b {
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -.02em;
  color: var(--nx-navy); font-size: .9375rem;
}
.cs-live {
  display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px;
  background: var(--nx-green-l); color: var(--nx-green-d); font-size: .7rem; font-weight: 700;
}
.cs-live i { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.cs-tabs { display: flex; gap: .25rem; flex-wrap: wrap; padding: .6rem .85rem; border-bottom: 1px solid var(--nx-line); }
.cs-tabs button {
  appearance: none; -webkit-appearance: none; background: transparent; border: 0;
  font-family: inherit; cursor: pointer;
  padding: .45rem .85rem; border-radius: .55rem; font-size: .8125rem; font-weight: 600; color: var(--nx-body);
  transition: background .2s ease, color .2s ease;
}
.cs-tabs button:hover { color: var(--nx-teal); }
.cs-tabs button.is-active { background: var(--nx-mint-l); color: var(--nx-teal); font-weight: 700; }
.cs-tabs button:focus-visible { outline: 2px solid var(--nx-mint); outline-offset: 2px; }

/* Builder panes other than the canvas */
.cs-pane { padding: clamp(1.15rem, 2vw, 1.6rem); }
.cs-pane-note { font-size: .75rem; color: var(--nx-grey-k); margin: 0 0 1.1rem; }

.cs-kv { margin: 0; }
.cs-kv-row {
  display: grid; grid-template-columns: 11rem 1fr; gap: .25rem 1.25rem;
  padding: .75rem 0; border-bottom: 1px solid var(--nx-line);
}
.cs-kv-row:last-child { border-bottom: 0; }
.cs-kv dt {
  margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -.02em;
  color: var(--nx-navy); font-size: .875rem;
}
.cs-kv dd { margin: 0; font-size: .875rem; color: var(--nx-body); }

.cs-ver {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--nx-line);
}
.cs-ver:last-child { border-bottom: 0; }
.cs-ver b {
  min-width: 3.25rem; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800;
  letter-spacing: -.02em; color: var(--nx-navy); font-size: .875rem;
}
.cs-ver .what { flex: 1 1 13rem; font-size: .875rem; color: var(--nx-body); }
.cs-ver small { font-size: .78125rem; color: var(--nx-grey-k); }
.cs-tag {
  display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 999px;
  background: var(--nx-green-l); color: var(--nx-green-d); font-size: .68rem; font-weight: 700;
}

.cs-log { display: flex; gap: .85rem; align-items: flex-start; padding: .8rem 0; border-bottom: 1px solid var(--nx-line); }
.cs-log:last-child { border-bottom: 0; }
.cs-log .ic {
  flex: 0 0 1.75rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-size: .75rem;
  display: grid; place-items: center; background: var(--nx-mint-l); color: var(--nx-teal);
}
.cs-log .txt { flex: 1 1 auto; min-width: 0; }
.cs-log b {
  display: block; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -.02em;
  color: var(--nx-navy); font-size: .875rem;
}
.cs-log .txt span { font-size: .8125rem; color: var(--nx-body); }
.cs-log time { flex: 0 0 auto; font-size: .78125rem; color: var(--nx-grey-k); white-space: nowrap; }

.cs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.cs-stat { border: 1px solid var(--nx-line); border-radius: .875rem; padding: 1rem 1.15rem; }
.cs-stat .v {
  margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -.02em;
  color: var(--nx-navy); font-size: 1.5rem;
}
.cs-stat .k { margin: .15rem 0 0; font-size: .8125rem; color: var(--nx-body); }
.cs-builder-body { display: grid; grid-template-columns: 13.5rem 1fr; }
.cs-nodes { padding: 1.15rem; border-right: 1px solid var(--nx-line); }
.cs-nodes h4 { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--nx-navy); margin-bottom: .85rem; }
.cs-nodes span {
  display: block; padding: .55rem .75rem; margin-bottom: .5rem; border: 1px solid var(--nx-line);
  border-radius: .6rem; font-size: .8125rem; color: var(--nx-body);
}
/* Node icons carry the label's own colour; only the trigger bolt is accented. */
.cs-nodes span i { color: inherit; margin-right: .45rem; font-size: .8rem; }
.cs-nodes span i.is-trigger { color: var(--nx-amber); }
.cs-canvas {
  padding: 1.35rem; min-height: 20rem; background-color: #fff;
  background-image: radial-gradient(var(--nx-line) 1px, transparent 1px); background-size: 18px 18px;
}
.cs-canvas .trigger { font-size: .875rem; color: var(--nx-body); margin-bottom: 1.1rem; }
.cs-canvas .trigger b { color: var(--nx-navy); }
.cs-flowline { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; }
.cs-flowline.is-in { padding-left: 2.25rem; }
.cs-flowline .ar { color: var(--nx-teal); }
.cs-node {
  background: #fff; border: 1px solid var(--nx-line); border-left: 3px solid var(--nx-teal);
  border-radius: .7rem; padding: .7rem .95rem; box-shadow: 0 10px 26px -20px rgba(10,31,61,.8);
}
.cs-node b {
  display: block; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -.02em;
  color: var(--nx-navy); font-size: .875rem;
}
.cs-node span { font-size: .75rem; color: var(--nx-body); }
.cs-node b i { color: inherit; margin-right: .4rem; }
.cs-node b i.is-trigger { color: var(--nx-amber); }

/* AI / CS / action badges */
.cs-badge {
  width: 2.75rem; height: 2.75rem; border-radius: .85rem; display: grid; place-items: center;
  background: var(--nx-mint-l); color: var(--nx-teal); margin-bottom: 1.4rem;
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: .8125rem;
}
.cs-panel .cs-badge { background: #EAF6F7; }

/* Workflow simulation */
.cs-sim-step { display: flex; align-items: center; gap: .85rem; margin-bottom: .6rem; }
.cs-sim-step:last-child { margin-bottom: 0; }
.cs-sim-step .dot {
  flex: 0 0 1.15rem; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  border: 2px solid var(--nx-line); background: #fff;
  display: grid; place-items: center; font-size: .5rem; color: #fff;
  transition: background .25s ease, border-color .25s ease;
}
.cs-sim-step .lbl {
  flex: 1 1 auto; padding: .7rem .9rem; border: 1px solid var(--nx-line); border-radius: .7rem;
  font-size: .875rem; color: var(--nx-body); background: #fff; transition: background .25s ease, border-color .25s ease;
}
.cs-sim-step .lbl b { color: var(--nx-navy); }
.cs-sim-step.is-done .dot { background: var(--nx-teal); border-color: var(--nx-teal); }
.cs-sim-step.is-done .lbl { background: var(--nx-mint-l); border-color: #BFE0E4; }
.cs-metric {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.cs-metric:last-child { border-bottom: 0; }
.cs-metric .k { font-size: .875rem; color: rgba(255,255,255,.72); margin: 0; }
.cs-metric .v {
  margin: 0; color: var(--nx-mint);
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -.02em;
}

/* Version timeline */
.cs-timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding-top: 1.9rem; }
.cs-timeline::before {
  content: ""; position: absolute; left: .35rem; right: .35rem; top: .34rem; height: 2px;
  background: linear-gradient(90deg, var(--nx-teal), rgba(79,179,191,.4));
}
.cs-tl { position: relative; }
.cs-tl::before {
  content: ""; position: absolute; top: -1.56rem; left: 0; width: .7rem; height: .7rem;
  border-radius: 50%; background: var(--nx-teal); box-shadow: 0 0 0 .25rem #fff;
}
.cs-tl b {
  display: block; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -.02em;
  color: var(--nx-navy); font-size: .9375rem;
}
.cs-tl p { font-size: .875rem; color: var(--nx-body); margin: .15rem 0 .9rem; }
.cs-tl small { font-size: .78125rem; color: var(--nx-grey-k); }

/* Tick lists */
.cs-ticks { list-style: none; margin: 0; padding: 0; }
.cs-ticks li {
  display: flex; gap: .7rem; align-items: flex-start; padding: .75rem 0;
  border-bottom: 1px solid var(--nx-line); font-size: .9375rem; color: var(--nx-navy);
}
.cs-ticks li:last-child { border-bottom: 0; }
.cs-ticks .tk { color: var(--nx-green); flex: 0 0 auto; }
.cs-panel .cs-ticks li { border-bottom-color: rgba(255,255,255,.1); color: #fff; }
.cs-panel .cs-ticks .tk { color: var(--nx-mint); }

/* Integration row */
.cs-int { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 1rem; align-items: center; }
.cs-int .ar { color: var(--nx-teal); font-size: 1.2rem; text-align: center; }
.cs-stack { list-style: none; margin: 0; padding: 0; }
.cs-stack li { padding: .75rem 0; border-bottom: 1px solid var(--nx-line); font-size: .9375rem; color: var(--nx-body); }
.cs-stack li:last-child { border-bottom: 0; }
.cs-panel .cs-stack li { border-bottom-color: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }

/* Outcomes */
.cs-outcome { border-top: 1px solid var(--nx-line); padding-top: 1.2rem; height: 100%; }
.cs-outcome h3 { font-size: 1.0625rem; margin-bottom: .35rem; }
.cs-outcome p { font-size: .875rem; color: var(--nx-body); margin: 0; }

/* Ecosystem row */
.cs-eco { display: grid; grid-template-columns: 1fr 1.06fr 1fr; gap: 1.25rem; align-items: center; }
/* the side cards are links; keep their body copy in body colour, not link colour */
.cs-eco a.card-nx { color: var(--nx-body); }
.cs-eco .cs-panel { transform: translateY(-.75rem); }

/* Closing CTA */
.cs-cta {
  text-align: center; border-radius: 2rem; border: 1px solid var(--nx-line);
  padding: clamp(2.75rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.75rem);
  background:
    radial-gradient(circle at 10% 15%, rgba(79,179,191,.20), transparent 30%),
    radial-gradient(circle at 92% 88%, rgba(44,94,158,.10), transparent 28%),
    linear-gradient(135deg, #EDF7F7, #F3F7FC);
}
.cs-cta p { max-width: 40rem; margin-inline: auto; color: var(--nx-body); font-size: 1.0625rem; }
.cs-cta .micro { font-size: .8125rem; color: var(--nx-grey-k); margin: 1.1rem 0 0; }

/* Responsive */
@media (max-width: 991.98px) {
  .cs-int { grid-template-columns: 1fr; }
  .cs-int .ar { transform: rotate(90deg); }
  .cs-eco { grid-template-columns: 1fr; }
  .cs-eco .cs-panel { transform: none; }
  .cs-timeline { grid-template-columns: repeat(2, 1fr); row-gap: 2.25rem; }
  .cs-timeline::before { display: none; }
  .cs-tl { padding-left: 1.4rem; }
  .cs-tl::before { top: .35rem; }
}
@media (max-width: 767.98px) {
  .cs-builder-body { grid-template-columns: 1fr; }
  .cs-nodes { border-right: 0; border-bottom: 1px solid var(--nx-line); }
  .cs-canvas { min-height: 0; }
  .cs-flowline.is-in { padding-left: 1rem; }
  .cs-timeline { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .cs-stats { grid-template-columns: repeat(2, 1fr); }
  .cs-kv-row { grid-template-columns: 1fr; }
}

/* ---- 16. Nexal Communication Hub page ----------------------------------
   Page-specific layout: the SMS thread mock, the connected-context pairs
   and the shared-inbox workspace. Everything else on the page reuses the
   shared .cs-* pieces from section 15 and the site cards from section 4.
   ------------------------------------------------------------------------ */

/* --- SMS thread mock ---------------------------------------------------- */
.ch-phone {
  width: min(20rem, 100%); margin-inline: auto; padding: .8rem;
  background: var(--nx-navy); border-radius: 2.25rem;
  box-shadow: 0 30px 70px -32px rgba(10,31,61,.7);
}
.ch-screen { background: #fff; border-radius: 1.7rem; padding: 1.25rem 1rem 1.4rem; }
.ch-screen .who {
  text-align: center; font-size: .78125rem; letter-spacing: .06em;
  color: var(--nx-grey-k); margin: 0 0 1.1rem;
}
.ch-bubble {
  max-width: 85%; padding: .75rem .9rem; border-radius: 1rem;
  font-size: .8125rem; line-height: 1.55; margin-bottom: .7rem;
  background: #fff; border: 1px solid var(--nx-line); color: var(--nx-body);
}
.ch-bubble:last-child { margin-bottom: 0; }
.ch-bubble.is-patient {
  margin-left: auto; background: var(--nx-mint-l); border-color: transparent; color: var(--nx-navy);
}
.ch-slot {
  display: block; margin-top: .5rem; padding: .5rem .65rem; border: 1px solid var(--nx-line);
  border-radius: .55rem; font-size: .78125rem; color: var(--nx-navy); background: #fff;
}

/* --- Connected context pairs -------------------------------------------- */
.ch-ctx { display: grid; gap: .7rem; }
.ch-ctx-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: .75rem; align-items: center; }
.ch-ctx-row .cell {
  padding: .8rem 1rem; border-radius: .75rem; font-size: .875rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff;
}
.ch-ctx-row .ar { color: var(--nx-mint); }

/* --- Shared-inbox workspace --------------------------------------------- */
.ch-ws {
  background: #fff; border: 1px solid var(--nx-line); border-radius: 1.375rem; overflow: hidden;
  box-shadow: 0 1px 2px rgba(10,31,61,.06), 0 22px 44px -28px rgba(10,31,61,.5);
}
.ch-ws-top {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--nx-line);
}
.ch-ws-top b {
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -.02em;
  color: var(--nx-navy); font-size: .9375rem;
}
.ch-ws-body { display: grid; grid-template-columns: 15rem 1fr; }
.ch-filters { padding: 1.15rem; border-right: 1px solid var(--nx-line); }
.ch-filter {
  display: block; width: 100%; text-align: left; appearance: none; -webkit-appearance: none;
  background: transparent; border: 1px solid transparent; border-radius: .7rem;
  padding: .65rem .85rem; margin-bottom: .35rem; font-family: inherit;
  font-size: .875rem; color: var(--nx-body); cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.ch-filter:hover { background: var(--nx-soft); }
.ch-filter.is-active { background: var(--nx-navy); color: #fff; font-weight: 600; }
.ch-filter:focus-visible { outline: 2px solid var(--nx-mint); outline-offset: 2px; }

.ch-list { padding: 1.35rem; }
.ch-list-head {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  justify-content: space-between; margin-bottom: 1.1rem;
}
.ch-list-head h4 {
  margin: 0; font-size: 1.0625rem;
}
.ch-row {
  display: flex; gap: .9rem; align-items: center;
  padding: .85rem 1rem; margin-bottom: .6rem;
  border: 1px solid var(--nx-line); border-radius: .875rem; background: #fff;
}
.ch-row:last-child { margin-bottom: 0; }
.ch-av {
  flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--nx-mint-l); color: var(--nx-teal);
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: .75rem;
}
.ch-row .txt { flex: 1 1 auto; min-width: 0; }
.ch-row b {
  display: block; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800;
  letter-spacing: -.02em; color: var(--nx-navy); font-size: .9375rem;
}
.ch-row .meta { font-size: .8125rem; color: var(--nx-body); }
.ch-pill {
  flex: 0 0 auto; padding: .3rem .7rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; background: var(--nx-soft); color: var(--nx-body);
}
.ch-pill.is-ai    { background: var(--nx-mint-l);  color: var(--nx-teal); }
.ch-pill.is-staff { background: var(--nx-blue-l);  color: var(--nx-blue); }
.ch-pill.is-done  { background: var(--nx-green-l); color: var(--nx-green-d); }

/* "NEXAL HANDLES" / "YOUR TEAM HANDLES" read as labels, as in the design */
.ch-handles { font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; }

.ch-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ch-tpl { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline;
  padding: .8rem 0; border-bottom: 1px solid var(--nx-line); }
.ch-tpl:last-child { border-bottom: 0; }
.ch-tpl b {
  flex: 1 1 14rem; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800;
  letter-spacing: -.02em; color: var(--nx-navy); font-size: .875rem;
}
.ch-tpl small { font-size: .78125rem; color: var(--nx-grey-k); }

@media (max-width: 991.98px) {
  .ch-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  .ch-ws-body { grid-template-columns: 1fr; }
  .ch-filters { border-right: 0; border-bottom: 1px solid var(--nx-line); }
  .ch-ctx-row { grid-template-columns: 1fr; }
  .ch-ctx-row .ar { transform: rotate(90deg); text-align: center; }
  .ch-row { align-items: flex-start; flex-wrap: wrap; }
}

/* ---- 17. Nexal Scheduler page ------------------------------------------
   Only the recovery-run card and the patient-match list are new here; the
   rest of the page reuses the .cs-* pieces from section 15, the workspace
   from section 16 and the site cards from section 4.
   ------------------------------------------------------------------------ */
.sc-lead {
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -.02em;
  color: var(--nx-navy); font-size: 1.0625rem; margin: 0 0 1.25rem;
}

/* Numbered rows inside the recovery-run card */
.sc-step-row {
  display: flex; gap: .9rem; align-items: center; padding: .85rem 1rem; margin-bottom: .6rem;
  border: 1px solid var(--nx-line); border-radius: .875rem; background: #fff;
}
.sc-step-row:last-child { margin-bottom: 0; }
.sc-step-row .n {
  flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--nx-mint-l); color: var(--nx-teal);
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: .875rem;
}
.sc-step-row .txt { flex: 1 1 auto; min-width: 0; }
.sc-step-row b {
  display: block; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800;
  letter-spacing: -.02em; color: var(--nx-navy); font-size: .9375rem;
}
.sc-step-row .meta { font-size: .8125rem; color: var(--nx-body); }

/* Patient matches inside the dark panel */
.sc-match {
  display: flex; gap: .9rem; align-items: center;
  padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.sc-match:last-of-type { border-bottom: 0; }
.sc-match .av {
  flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,.1); color: var(--nx-mint);
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: .75rem;
}
.sc-match .txt { flex: 1 1 auto; min-width: 0; font-size: .875rem; color: rgba(255,255,255,.72); }
.sc-match .txt b {
  color: #fff; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800;
  letter-spacing: -.02em; margin-right: .4rem;
}
.sc-match .score {
  flex: 0 0 auto; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800;
  color: var(--nx-mint); font-size: 1rem;
}
.sc-caveat { font-size: .8125rem; color: rgba(255,255,255,.6); margin: 1.25rem 0 0; }

@media (max-width: 575.98px) {
  .sc-step-row { flex-wrap: wrap; }
}