/* ==========================================================================
   Praxoma public site — product-led design layer.

   Loaded last on every public route. It owns the shared chrome (header,
   tools, mobile navigation, inquiry modal, footer) so the website and the
   product prototype at /app/ read as one thing, and it owns the rebuilt
   homepage sections (prefixed `px-`).

   Earlier stylesheets still carry the interior pages' body content. This
   sheet is deliberately additive so those pages keep working unchanged.

   Two constraints shape almost every rule here, both enforced in CI:
   no horizontal overflow from 320px to 1536px, and none again at 200%
   root text scaling. Hence minmax(0,1fr) on every grid, clamp() sizing
   in rem, and no fixed pixel widths on anything that holds text.
   ========================================================================== */

:root {
  /* Palette, elevation and shape live in /praxoma-tokens.css, shared with the
     prototype. Only this site's layout rhythm is declared here. */
  --px-gap: clamp(2.75rem, 7vw, 5.5rem);
  --px-pad: clamp(1rem, 4vw, 2.5rem);
  --px-max: 74rem;
  --px-shadow: var(--px-e2);
  --px-shadow-lg: var(--px-e3);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
  background: var(--px-paper);
  color: var(--px-ink);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

.px-wrap {
  width: 100%;
  max-width: var(--px-max);
  margin-inline: auto;
  padding-inline: var(--px-pad);
}

.px-section { padding-block: var(--px-gap); }
.px-section[id], .px-hero[id] { scroll-margin-top: 5.5rem; }
.px-section + .px-section { padding-top: 0; }
.px-section--tint { background: var(--px-soft); padding-block: var(--px-gap); }
.px-section--tint + .px-section { padding-top: var(--px-gap); }

/* Every heading and body run wraps rather than pushing the document wider. */
.px-section h2, .px-section h3, .px-section p, .px-section li { overflow-wrap: anywhere; }

.px-eyebrow {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--px-teal);
  margin: 0 0 .75rem;
}

.px-h2 {
  font-size: clamp(1.55rem, 4.2vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -.018em;
  margin: 0 0 .75rem;
  color: var(--px-ink);
}

.px-sub {
  font-size: clamp(1rem, 1.9vw, 1.125rem);
  color: var(--px-ink-soft);
  margin: 0;
  max-width: 44rem;
}

.px-head { margin-bottom: clamp(1.75rem, 4vw, 3rem); }

/* --------------------------------------------------------------------------
   Buttons and links
   -------------------------------------------------------------------------- */

.px-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.px-btn:focus-visible { outline: 3px solid var(--px-blue); outline-offset: 3px; }
.px-btn--primary { background: var(--px-teal); color: #fff; }
.px-btn--primary:hover { background: var(--px-teal-deep); }
.px-btn--ghost { background: var(--px-white); color: var(--px-ink); border-color: var(--px-line-strong); }
.px-btn--ghost:hover { border-color: var(--px-teal); color: var(--px-teal); }
.px-btn--onDark { background: #fff; color: var(--px-teal-deep); }
.px-btn--onDark:hover { background: var(--px-teal-pale); }

.px-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 30rem) {
  .px-hero .px-actions, .px-final .px-actions { flex-direction: column; align-items: stretch; }
}

.px-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 650;
  font-size: 1rem;
  color: var(--px-teal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.px-link:hover { border-bottom-color: currentColor; }
.px-link::after { content: "→"; transition: transform .15s ease; }
.px-link:hover::after { transform: translateX(2px); }

/* --------------------------------------------------------------------------
   Product UI evidence panels

   These are the website's own rendering of what /app/ shows. They reuse the
   prototype's real vocabulary — states, owners, milestones — so the page
   demonstrates the product instead of describing it. Every panel that shows
   invented people or care carries a synthetic-data note.
   -------------------------------------------------------------------------- */

.px-ui {
  background: var(--px-white);
  border: 1px solid var(--px-line);
  border-radius: var(--px-r-lg);
  box-shadow: var(--px-shadow);
  overflow: hidden;
  min-width: 0;
}
.px-ui--raised { box-shadow: var(--px-shadow-lg); }

.px-ui-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1rem;
  background: var(--px-soft);
  border-bottom: 1px solid var(--px-line);
  font-size: .8125rem;
  font-weight: 650;
  color: var(--px-ink-soft);
}
.px-ui-bar .px-dot {
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--px-teal); flex: none;
}
.px-ui-bar .px-ui-tag {
  margin-left: auto;
  font-size: .6875rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--px-muted);
  border: 1px solid var(--px-line-strong);
  border-radius: 999px;
  padding: .12rem .5rem;
  white-space: nowrap;
}

.px-ui-body { padding: clamp(1rem, 3vw, 1.5rem); display: grid; gap: 1rem; }

.px-ui-eyebrow {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--px-muted);
  margin: 0;
}
.px-ui-title { font-size: 1.0625rem; font-weight: 700; margin: .15rem 0 0; line-height: 1.3; }

/* The next-step band: one situation, one owner, one action. */
.px-band {
  border-radius: var(--px-r);
  padding: 1rem;
  display: grid;
  gap: .5rem;
  border: 1px solid var(--px-line);
  background: var(--px-soft);
}
.px-band--you { background: var(--px-amber-pale); border-color: #eddcbc; }
.px-band--waiting { background: var(--px-blue-pale); border-color: #cfe0f7; }
.px-band--done { background: var(--px-green-pale); border-color: #c9e6d7; }

.px-band-label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0;
  color: var(--px-ink-soft);
}
.px-band-line { margin: 0; font-size: 1rem; font-weight: 650; line-height: 1.4; }
.px-band-note { margin: 0; font-size: .9375rem; color: var(--px-ink-soft); }

.px-owner {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8125rem;
  font-weight: 650;
  color: var(--px-ink-soft);
  background: rgba(255, 255, 255, .75);
  border: 1px solid var(--px-line);
  border-radius: 999px;
  padding: .2rem .6rem;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Milestone list — the patient's history, not the audit record. */
.px-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.px-steps li {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  gap: .6rem;
  align-items: start;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--px-ink-soft);
}
.px-steps li::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: var(--px-green-pale);
  color: var(--px-green);
  font-size: .7rem;
  font-weight: 800;
  margin-top: .12rem;
}
.px-steps li.is-now { color: var(--px-ink); font-weight: 600; }
.px-steps li.is-now::before { content: "●"; background: var(--px-blue-pale); color: var(--px-blue); }
.px-steps li.is-next { color: var(--px-muted); }
.px-steps li.is-next::before { content: ""; background: transparent; border: 1.5px dashed var(--px-line-strong); }

.px-synthetic {
  margin: 0;
  font-size: .8125rem;
  color: var(--px-muted);
  display: flex;
  gap: .4rem;
  align-items: baseline;
}
.px-synthetic::before { content: "◆"; color: var(--px-line-strong); flex: none; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.px-hero {
  background: linear-gradient(180deg, var(--px-teal-pale) 0%, rgba(228, 241, 242, 0) 78%);
  padding-block: clamp(1.75rem, 5vw, 3.5rem) var(--px-gap);
}
.px-hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 62rem) {
  .px-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

.px-hero h1 {
  font-size: clamp(2rem, 6.2vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  margin: 0 0 1rem;
  color: var(--px-ink);
}
.px-hero-lead {
  font-size: clamp(1.0625rem, 2.3vw, 1.3125rem);
  line-height: 1.5;
  color: var(--px-ink-soft);
  margin: 0 0 1.5rem;
  max-width: 34rem;
}
.px-hero-note {
  margin: 1.25rem 0 0;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--px-muted);
  max-width: 34rem;
}
.px-hero-note b { color: var(--px-ink-soft); font-weight: 650; }

/* --------------------------------------------------------------------------
   Proof strip (retained: the hosted production check looks for it)
   -------------------------------------------------------------------------- */

.proof-strip {
  display: grid;
  gap: 1px;
  grid-template-columns: minmax(0, 1fr);
  background: var(--px-line);
  border: 1px solid var(--px-line);
  border-radius: var(--px-r);
  overflow: hidden;
  margin-block: 0;
}
@media (min-width: 46rem) { .proof-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.proof-strip > div {
  background: var(--px-white);
  padding: 1.15rem 1.25rem;
  display: grid;
  gap: .3rem;
  align-content: start;
  min-width: 0;
}
.proof-strip span {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--px-teal);
}
.proof-strip strong { font-size: 1rem; line-height: 1.35; }
.proof-strip small { font-size: .875rem; color: var(--px-ink-soft); line-height: 1.45; }

/* --------------------------------------------------------------------------
   The loop: need → find → connect → coordinate → continue
   -------------------------------------------------------------------------- */

.px-loop { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); counter-reset: px-loop; }
@media (min-width: 40rem) { .px-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .px-loop { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.px-loop-step {
  background: var(--px-white);
  border: 1px solid var(--px-line);
  border-radius: var(--px-r);
  padding: 1.25rem;
  display: grid;
  gap: .4rem;
  align-content: start;
  min-width: 0;
  position: relative;
}
.px-loop-step h3 {
  font-size: 1.0625rem;
  margin: .35rem 0 0;
  letter-spacing: -.01em;
}
.px-loop-step p { margin: 0; font-size: .9375rem; color: var(--px-ink-soft); line-height: 1.5; }
.px-loop-num {
  counter-increment: px-loop;
  width: 1.9rem; height: 1.9rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--px-teal-pale);
  color: var(--px-teal-deep);
  font-size: .8125rem;
  font-weight: 800;
}
.px-loop-num::before { content: counter(px-loop); }

.px-loop-foot {
  margin: 1.5rem 0 0;
  font-size: .9375rem;
  color: var(--px-ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Everyone knows what happens next
   -------------------------------------------------------------------------- */

.px-next-grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 62rem) { .px-next-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }

.px-points { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; }

/* Three children, two columns: the marker holds column one across both rows so
   the heading and its paragraph stack together in column two. Without the
   row span, auto-placement drops the paragraph into the 2rem marker column and
   breaks it a letter at a time. */
.px-points li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: .85rem;
  row-gap: .2rem;
  align-items: start;
}
.px-points li > .px-chip { grid-row: span 2; }
.px-points b { grid-column: 2; font-size: 1rem; line-height: 1.35; }
.px-points span { grid-column: 2; font-size: .9375rem; color: var(--px-ink-soft); line-height: 1.55; }

/* --------------------------------------------------------------------------
   Three lenses on one journey
   -------------------------------------------------------------------------- */

.px-lens-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 58rem) { .px-lens-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* One box per lens, so a two-line role never pushes a panel out of line with
   its neighbours. The grid stretches; the band sits at the bottom of each. */
.px-lens { display: grid; }
.px-lens .px-ui { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.px-lens .px-ui-body { grid-template-rows: auto minmax(0, 1fr); align-content: start; }
.px-lens-who { display: grid; gap: .1rem; min-width: 0; }
.px-lens-who b { font-size: 1.0625rem; line-height: 1.3; }
.px-lens-who span { font-size: .875rem; color: var(--px-muted); overflow-wrap: anywhere; line-height: 1.4; }

.px-moment {
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  padding: 1.15rem 1.25rem;
  border-left: 3px solid var(--px-teal);
  background: var(--px-white);
  border-radius: 0 var(--px-r) var(--px-r) 0;
  font-size: .9375rem;
  color: var(--px-ink-soft);
}
.px-moment b { color: var(--px-ink); }

/* --------------------------------------------------------------------------
   Network — six questions, answered separately
   -------------------------------------------------------------------------- */

.px-facets { display: grid; gap: 1px; background: var(--px-line); border: 1px solid var(--px-line);
  border-radius: var(--px-r); overflow: hidden; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .px-facets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .px-facets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.px-facet { background: var(--px-white); padding: 1.25rem; display: grid; gap: .3rem; align-content: start; min-width: 0; }
.px-facet b { font-size: 1rem; }
.px-facet span { font-size: .9375rem; color: var(--px-ink-soft); line-height: 1.5; }
.px-facet--not { background: var(--px-soft); }
.px-facet--not b { color: var(--px-amber); }

/* --------------------------------------------------------------------------
   Experience Praxoma
   -------------------------------------------------------------------------- */

.px-xp {
  background: var(--px-teal-deep);
  color: #fff;
  border-radius: clamp(var(--px-r), 3vw, 28px);
  padding: clamp(1.5rem, 5vw, 3.25rem);
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 62rem) { .px-xp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.px-xp h2 { color: #fff; }
.px-xp .px-eyebrow { color: #9fd4dc; }
.px-xp p { color: #d3e8eb; }
.px-xp .px-sub { color: #d3e8eb; }

.px-routes { display: grid; gap: .6rem; margin: 1.5rem 0 0; }
.px-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1.1rem;
  border-radius: var(--px-r-sm);
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  text-decoration: none;
  font-size: .9375rem;
  transition: background-color .15s ease;
}
.px-route:hover { background: rgba(255, 255, 255, .17); }
.px-route:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.px-route b { display: block; font-size: 1rem; font-weight: 650; }
.px-route span { display: block; color: #bcdde2; font-size: .875rem; overflow-wrap: anywhere; }
.px-route::after { content: "→"; color: #9fd4dc; }

.px-xp-note {
  margin: 1.25rem 0 0;
  font-size: .8125rem;
  color: #9fd4dc;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 650;
}

/* --------------------------------------------------------------------------
   Trust
   -------------------------------------------------------------------------- */

.px-trust { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 46rem) { .px-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .px-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.px-trust-card {
  background: var(--px-white);
  border: 1px solid var(--px-line);
  border-radius: var(--px-r);
  padding: 1.25rem;
  display: grid;
  gap: .35rem;
  align-content: start;
  min-width: 0;
}
.px-trust-card b { font-size: 1rem; }
.px-trust-card p { margin: 0; font-size: .9375rem; color: var(--px-ink-soft); line-height: 1.5; }

.px-honest {
  margin-top: 1.5rem;
  padding: 1.25rem 1.35rem;
  border: 1px dashed var(--px-line-strong);
  border-radius: var(--px-r);
  background: var(--px-white);
}
.px-honest h3 { margin: 0 0 .5rem; font-size: 1rem; }
.px-honest p { margin: 0; font-size: .9375rem; color: var(--px-ink-soft); line-height: 1.55; }

/* --------------------------------------------------------------------------
   Stakeholder paths
   -------------------------------------------------------------------------- */

.px-paths { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 46rem) { .px-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .px-paths { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.px-path {
  border-radius: var(--px-r);
  padding: 1.35rem;
  display: grid;
  gap: .4rem;
  align-content: start;
  border: 1px solid var(--px-line);
  background: var(--px-white);
  min-width: 0;
}
.px-path h3 { margin: 0; font-size: 1.0625rem; }
.px-path p { margin: 0; font-size: .9375rem; color: var(--px-ink-soft); line-height: 1.5; }
.px-path .px-link { margin-top: .35rem; font-size: .9375rem; }
.px-path--a { background: var(--px-green-pale); border-color: #cfe8da; }
.px-path--b { background: var(--px-blue-pale); border-color: #d4e2f8; }
.px-path--c { background: var(--px-violet-pale); border-color: #ddd8f4; }
.px-path--d { background: var(--px-amber-pale); border-color: #efe1c6; }

/* --------------------------------------------------------------------------
   Closing call to action
   -------------------------------------------------------------------------- */

.px-final {
  text-align: center;
  display: grid;
  gap: 1rem;
  justify-items: center;
  padding-block: var(--px-gap);
  border-top: 1px solid var(--px-line);
}
.px-final h2 { margin: 0; }
.px-final .px-sub { margin-inline: auto; }
.px-final .px-actions { justify-content: center; margin-top: .5rem; }

/* --------------------------------------------------------------------------
   Shared chrome — header, tools, mobile navigation, footer, modal.

   public-enhancements.js builds these at runtime on every route, so styling
   them here is what makes the whole site (and the doorway into /app/) feel
   like one product rather than a set of pages.
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(251, 252, 252, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--px-line);
}
.site-header .nav-wrap {
  width: 100%;
  max-width: var(--px-max);
  margin-inline: auto;
  padding: .7rem var(--px-pad);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: .75rem;
  min-height: 0;
}
.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 750;
  font-size: 1.0625rem;
  color: var(--px-ink);
  text-decoration: none;
  letter-spacing: -.015em;
  min-width: 0;
}
.site-header .brand-mark {
  width: 1.85rem; height: 1.85rem;
  border-radius: .55rem;
  background: var(--px-teal);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .95rem;
  font-weight: 800;
  flex: none;
}

.site-header .desktop-nav { display: none; gap: .1rem; margin-left: .25rem; min-width: 0; }
@media (min-width: 68rem) { .site-header .desktop-nav { display: flex; flex-wrap: nowrap; } }
.site-header .desktop-nav a {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--px-ink-soft);
  text-decoration: none;
  padding: .45rem .5rem;
  border-radius: 8px;
  white-space: nowrap;
}
.site-header .desktop-nav a:hover { background: var(--px-soft); color: var(--px-ink); }
.site-header .desktop-nav a.active,
.site-header .desktop-nav a[aria-current] { color: var(--px-teal); background: var(--px-teal-pale); }

.site-header .public-tools {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
}
.font-controls { display: none; gap: .15rem; }
@media (min-width: 88rem) { .font-controls { display: inline-flex; } }
.font-btn, .lang-button {
  border: 1px solid var(--px-line-strong);
  background: var(--px-white);
  color: var(--px-ink-soft);
  border-radius: 8px;
  padding: .35rem .55rem;
  /* 14px floor: CI rejects any interactive text below it. */
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.2;
}
.font-btn[aria-pressed="true"], .lang-button[aria-pressed="true"] {
  background: var(--px-teal-pale); color: var(--px-teal-deep); border-color: var(--px-teal);
}
.font-btn:focus-visible, .lang-button:focus-visible, .menu-btn:focus-visible,
.header-cta:focus-visible, .px-app-cta:focus-visible {
  outline: 3px solid var(--px-blue); outline-offset: 2px;
}

/* The doorway into the product, present in the header on every route. */
.px-app-cta {
  display: none;
  align-items: center;
  gap: .4rem;
  background: var(--px-teal);
  color: #fff;
  border-radius: 999px;
  padding: .5rem 1rem;
  font-size: .9375rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.px-app-cta:hover { background: var(--px-teal-deep); }
@media (min-width: 34rem) { .px-app-cta { display: inline-flex; } }

.header-cta {
  display: none;
  background: transparent;
  border: 1px solid var(--px-line-strong);
  color: var(--px-ink);
  border-radius: 999px;
  padding: .5rem 1rem;
  font-size: .9375rem;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}
.header-cta:hover { border-color: var(--px-teal); color: var(--px-teal); }
/* Visible exactly where the collapsed menu is in use. Below 34rem the header is
   brand, language and menu only; from 68rem the desktop navigation needs the room,
   so the inquiry CTA moves into page content and the footer. */
@media (min-width: 34rem) and (max-width: 67.99rem) { .header-cta { display: inline-flex; } }

.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 10px;
  border: 1px solid var(--px-line-strong);
  background: var(--px-white);
  color: var(--px-ink);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  flex: none;
}
@media (min-width: 68rem) { .menu-btn { display: none; } }

@media (max-width: 700px) {
  body .site-header .nav-wrap {
    display: flex;
    height: auto;
    min-height: 0;
    align-items: center;
    gap: .5rem;
    padding-block: .6rem;
  }
  body .site-header .nav-wrap > .public-tools {
    width: auto;
    margin-left: auto;
    flex-wrap: nowrap;
  }
}

.mobile-nav {
  display: grid;
  gap: .15rem;
  padding: .5rem var(--px-pad) 1rem;
  border-top: 1px solid var(--px-line);
  background: var(--px-white);
}
.mobile-nav a, .mobile-nav button {
  font-size: 1rem;
  font-weight: 600;
  color: var(--px-ink);
  text-decoration: none;
  padding: .7rem .5rem;
  border-radius: 10px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.mobile-nav a:hover, .mobile-nav button:hover { background: var(--px-soft); }

/* public-enhancements.js sets both `.active` and `aria-current` on the current
   link. The desktop rule above styles aria-current; without this the open menu
   on a phone showed no current-route state at all. */
.mobile-nav a.active, .mobile-nav a[aria-current] {
  color: var(--px-teal);
  background: var(--px-teal-pale);
  font-weight: 700;
}
.mobile-nav .mobile-join, .mobile-nav .px-app-cta {
  display: block;
  margin-top: .4rem;
  text-align: center;
}
.mobile-nav .px-app-cta { background: var(--px-teal); color: #fff; }
.mobile-nav .mobile-join { border: 1px solid var(--px-line-strong); }

/* Footer */
.site-footer {
  background: var(--px-white);
  border-top: 1px solid var(--px-line);
  padding-block: clamp(2rem, 5vw, 3rem);
  margin-top: 0;
}
.site-footer .footer-bottom {
  width: 100%;
  max-width: var(--px-max);
  margin-inline: auto;
  padding-inline: var(--px-pad);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.site-footer .footer-bottom a {
  font-size: .9375rem;
  color: var(--px-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.site-footer .footer-bottom a:hover { color: var(--px-teal); border-bottom-color: currentColor; }

/* Inquiry modal */
.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(16, 33, 43, .5);
  display: grid;
  place-items: center;
  padding: 1rem;
  overflow-y: auto;
}
.lead-modal[hidden] { display: none; }
.lead-dialog {
  background: var(--px-white);
  border-radius: var(--px-r-lg);
  padding: clamp(1.25rem, 4vw, 2rem);
  width: 100%;
  max-width: 32rem;
  box-shadow: var(--px-shadow-lg);
  display: grid;
  gap: 1rem;
}
.lead-dialog header { display: flex; gap: 1rem; align-items: start; }
.lead-dialog h2 { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.lead-dialog .eyebrow { margin: 0 0 .25rem; font-size: .75rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--px-teal); font-weight: 700; }
.modal-close {
  margin-left: auto; flex: none;
  width: 2.25rem; height: 2.25rem;
  border-radius: 8px;
  border: 1px solid var(--px-line-strong);
  background: var(--px-white);
  font-size: 1.125rem;
  cursor: pointer;
}
.lead-form { display: grid; gap: .85rem; }
.lead-form label { display: grid; gap: .3rem; font-size: .9375rem; font-weight: 600; }
.lead-form input, .lead-form select, .lead-form textarea {
  font: inherit;
  font-size: 1rem;
  padding: .65rem .75rem;
  border: 1px solid var(--px-line-strong);
  border-radius: 10px;
  background: var(--px-white);
  color: var(--px-ink);
  width: 100%;
  min-width: 0;
}
.lead-form textarea { min-height: 5rem; resize: vertical; }
.lead-form button[type="submit"] {
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  background: var(--px-teal);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: .8rem 1.25rem;
  cursor: pointer;
}
.lead-form small { font-size: .875rem; color: var(--px-muted); line-height: 1.5; }
.lead-form small a { color: var(--px-teal); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--px-ink);
  color: #fff;
  padding: .75rem 1rem;
  z-index: 80;
  border-radius: 0 0 8px 0;
  font-size: 1rem;
}
.skip:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   Interior pages

   The stakeholder pages keep their existing body styles; these rules give
   them the same doorway into the product and pull their display type back
   to the scale the homepage uses.
   -------------------------------------------------------------------------- */

.px-inline-app {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-left: .75rem;
  font-size: 1rem;
  font-weight: 650;
  color: var(--px-teal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.px-inline-app:hover { border-bottom-color: currentColor; }
.px-inline-app:focus-visible { outline: 3px solid var(--px-blue); outline-offset: 3px; }

.hero h1 {
  font-size: clamp(1.9rem, 5.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.028em;
}

/* ==========================================================================
   Calm surfaces and iconography

   The reference direction is not minimal — it is calm. What makes it read
   that way is soft tinted ground instead of hard outlines, one colour per
   meaning, an icon on every concept so the eye lands before the text does,
   and depth from light rather than from borders. These rules take the
   sections above from "correct" to that.
   ========================================================================== */

/* Icons ------------------------------------------------------------------ */

.px-i {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* A tinted chip behind an icon, carrying the meaning colour. */
.px-chip {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--px-teal-pale);
  color: var(--px-teal);
}
.px-chip--green { background: var(--px-green-pale); color: var(--px-green); }
.px-chip--blue { background: var(--px-blue-pale); color: var(--px-blue); }
.px-chip--amber { background: var(--px-amber-pale); color: var(--px-amber); }
.px-chip--violet { background: var(--px-violet-pale); color: var(--px-violet); }
.px-chip--sm { width: 2rem; height: 2rem; border-radius: 10px; }
.px-chip--sm .px-i { width: 1.05rem; height: 1.05rem; }

/* Softer surfaces --------------------------------------------------------- */

.px-ui {
  border: 0;
  box-shadow: var(--px-e2);
  border-radius: var(--px-r-lg);
  background: var(--px-white);
}
.px-ui--raised { box-shadow: var(--px-e3); }

.px-ui-bar {
  background: transparent;
  border-bottom: 1px solid var(--px-line);
  padding: .85rem 1.15rem;
}
.px-ui-tag { border-color: var(--px-line); background: var(--px-softer); }

.px-band { border: 0; box-shadow: none; padding: 1.1rem; border-radius: var(--px-r); }
.px-band--you { background: var(--px-amber-pale); }
.px-band--waiting { background: var(--px-blue-pale); }
.px-band--done { background: var(--px-green-pale); }
.px-owner { border-color: transparent; background: rgba(255, 255, 255, .85); }

/* A band opens with its meaning icon rather than a bare label. */
.px-band-label { display: flex; align-items: center; gap: .45rem; }
.px-band-label .px-i { width: 1rem; height: 1rem; }
.px-band--you .px-band-label { color: var(--px-amber); }
.px-band--waiting .px-band-label { color: var(--px-blue); }
.px-band--done .px-band-label { color: var(--px-green); }

.px-loop-step, .px-trust-card, .px-path, .px-facet {
  border: 0;
  box-shadow: var(--px-e1);
  border-radius: var(--px-r);
}
.px-facets { background: transparent; border: 0; gap: 1px; }
.px-facet { border-radius: 0; box-shadow: none; background: var(--px-white); }
.px-facets { border-radius: var(--px-r); overflow: hidden; box-shadow: var(--px-e1); background: var(--px-line); }
.px-facet--not { background: var(--px-amber-pale); }

.proof-strip { border: 0; box-shadow: var(--px-e1); background: var(--px-line); }

.px-loop-step { display: grid; gap: .5rem; }
.px-loop-num { display: none; }

/* Stakeholder cards lead with an icon, as the direction does. */
.px-path { display: grid; gap: .55rem; align-content: start; padding: 1.5rem 1.35rem; }
.px-path h3 { margin-top: .2rem; }

/* Trust cards read as a row of principles, not a wall of boxes. */
.px-trust-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .9rem; align-items: start; }
.px-trust-card .px-chip { grid-row: span 2; }
.px-trust-card b { align-self: end; }

/* Device framing ---------------------------------------------------------- */

.px-device {
  position: relative;
  border-radius: var(--px-r-xl);
  padding: .6rem;
  background: linear-gradient(160deg, #dfeaec, #f4f9fa);
  box-shadow: var(--px-e3);
  min-width: 0;
}
.px-device > .px-ui { box-shadow: var(--px-e1); border-radius: var(--px-r-lg); }

/* The hero panel lifts off the illustration the way the direction shows. */
@media (min-width: 62rem) {
  .px-hero-grid > .px-device { transform: translateY(-.5rem); }
}

/* Outcome row ------------------------------------------------------------- */

.px-outcomes {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  background: var(--px-teal-tint);
  border-radius: var(--px-r-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
@media (min-width: 40rem) { .px-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .px-outcomes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.px-outcome { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: center; min-width: 0; }
.px-outcome b { display: block; font-size: 1rem; line-height: 1.3; }
.px-outcome span { display: block; font-size: .875rem; color: var(--px-ink-soft); line-height: 1.4; }

/* Image slots ------------------------------------------------------------- */

/* Photography is not in the repository yet. These slots hold the composition
   and read as deliberate while empty, so nothing looks broken pending art. */
.px-figure {
  position: relative;
  border-radius: var(--px-r-xl);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 10%, var(--px-teal-pale), transparent 60%),
    linear-gradient(150deg, #eef6f7, #e2eef0);
  min-height: 16rem;
  display: grid;
  place-items: center;
  box-shadow: var(--px-e1);
}
.px-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.px-figure-mark { color: var(--px-teal); opacity: .32; }
.px-figure-mark .px-i { width: 3.5rem; height: 3.5rem; stroke-width: 1.25; }

/* The loop, drawn as a flow rather than five cramped cards ---------------- */

.px-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem 1rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 46rem) { .px-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .px-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.px-flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
  min-width: 0;
  position: relative;
}
@media (min-width: 70rem) {
  .px-flow-step { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: .85rem; }
  /* A hairline connector between stages, never under the last one. */
  .px-flow-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.65rem;
    left: 3.9rem;
    right: -1rem;
    height: 1px;
    background: var(--px-line-strong);
  }
}

.px-flow-mark {
  width: 3.3rem;
  height: 3.3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--px-white);
  color: var(--px-teal);
  box-shadow: var(--px-e1);
  flex: none;
  position: relative;
  z-index: 1;
}
.px-flow-mark .px-i { width: 1.45rem; height: 1.45rem; }

.px-flow-text { display: grid; gap: .2rem; min-width: 0; }
.px-flow-text b { font-size: 1.0625rem; letter-spacing: -.01em; }
.px-flow-text span { font-size: .9375rem; color: var(--px-ink-soft); line-height: 1.45; }

/* Stakeholder cards are already tinted, so an equally tinted chip behind the
   icon disappears into them. The icon carries the colour on its own instead. */
.px-path .px-chip { width: auto; height: auto; background: transparent; border-radius: 0; }
.px-path .px-chip .px-i { width: 1.75rem; height: 1.75rem; }
.px-path .px-link::after { content: none; }
.px-path .px-link { gap: .35rem; }
.px-path .px-link::before { content: "→"; order: 2; }

/* A status pill squeezed to 83px broke its label across three lines on the
   interior pages. Small labels keep enough room to read, or wrap cleanly. */
.route-card .state, .mini-label, .pill {
  min-width: 7rem;
  text-align: center;
}

/* The workspace preview on the professionals page is a narrow panel, and its
   rows were a three-column grid inside it — the status column collapsed to
   83px and broke its label across three lines. The row stacks instead. */
.work-row {
  grid-template-columns: minmax(0, 1fr);
  gap: .2rem;
}
.work-row > * { min-width: 0; }
@media (min-width: 64rem) {
  .work-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: .2rem .75rem; align-items: baseline; }
}

/* ==========================================================================
   Stakeholder pages

   Same system as the homepage: a hero that puts the product beside the claim,
   points that lead with an icon, and a closing action. Built from px-
   components so these pages and the homepage are one design, not two.
   ========================================================================== */

.px-crumb {
  padding: 1rem 0 0;
  font-size: .875rem;
  color: var(--px-muted);
}
.px-crumb a { color: var(--px-teal); text-decoration: none; }
.px-crumb a:hover { text-decoration: underline; }

.px-page-hero { padding-block: clamp(1.5rem, 4vw, 2.75rem) var(--px-gap); }

.px-page-hero h1 {
  font-size: clamp(1.85rem, 5vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -.028em;
  margin: 0 0 .9rem;
  color: var(--px-ink);
}
.px-page-hero .px-hero-lead { font-size: clamp(1.0625rem, 2vw, 1.1875rem); }

/* Questions ------------------------------------------------------------- */

.px-faq { display: grid; gap: .6rem; }
.px-faq details {
  background: var(--px-white);
  border-radius: var(--px-r);
  box-shadow: var(--px-e1);
  padding: 0;
  overflow: hidden;
}
.px-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.15rem;
  font-size: 1rem;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.px-faq summary::-webkit-details-marker { display: none; }
.px-faq summary::after {
  content: "+";
  margin-left: auto;
  color: var(--px-teal);
  font-size: 1.25rem;
  line-height: 1;
  flex: none;
}
.px-faq details[open] summary::after { content: "\2212"; }
.px-faq summary:focus-visible { outline: 3px solid var(--px-blue); outline-offset: -3px; }
.px-faq p {
  margin: 0;
  padding: 0 1.15rem 1.15rem;
  font-size: .9375rem;
  color: var(--px-ink-soft);
  line-height: 1.6;
}

/* On the stakeholder pages the points carry a whole section, so they spread
   across the width instead of hugging the left edge of an empty band. */
@media (min-width: 64rem) {
  .px-page-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; align-items: start; }
  .px-page-points li { grid-template-columns: minmax(0, 1fr); row-gap: .45rem; }
  .px-page-points li > .px-chip { grid-row: auto; }
  .px-page-points b, .px-page-points span { grid-column: 1; }
}
.px-page-hero + .px-section--tint { padding-block: clamp(2.25rem, 5vw, 3.5rem); }

/* --------------------------------------------------------------------------
   Mascot

   Patient surfaces only. The pages that ask a clinic or a laboratory to join
   a coordination network stay plain, and it never sits beside a trust claim.
   Cropped to the character alone: the source render carried a different
   wordmark on the wall and the clipboard, which is not this site's identity.
   -------------------------------------------------------------------------- */

.px-mascot {
  display: block;
  width: clamp(5.5rem, 15vw, 7.5rem);
  aspect-ratio: 1;
  /* A soft square rather than a circle: a round mask cuts the ears off. */
  border-radius: 30%;
  overflow: hidden;
  box-shadow: var(--px-e2);
  background: var(--px-teal-tint);
}
.px-mascot img { width: 100%; height: 100%; object-fit: cover; display: block; }