/* platform.css — styles specific to the Platform page.
   Redesigned 2026-10-21 (second pass, canvas board "PlatformFull"): hero with
   an "On this page" card and a slim sticky section bar; 01 a single centered
   statement (the interactive open loop moved to the Health Systems page);
   02 the closing-the-loop figure-eight with a two-call conversation card;
   03 an annotated example Program, the library and the hands-on scale;
   04 the EHR as the anchor (reads, acts, writes back). Sections alternate
   white and pale pink. Eyebrows are neutral; teal is reserved for the
   patient. */

.page-platform {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: var(--color-white);
}

.page-platform section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Shared bits ------------------------------------------------------------ */

.eyebrow {
  font-family: var(--font-body-small-family);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-body-small-size);
  line-height: var(--font-body-small-line-height);
  color: var(--color-neutral-500);
  text-transform: uppercase;
  margin: 0;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 12px;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

.button--primary {
  background: var(--color-primary-600);
  color: var(--color-white);
  font-family: var(--font-body-bold-family);
  font-weight: var(--font-body-bold-weight);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  transition: background-color var(--transition-hover), color var(--transition-hover), box-shadow var(--transition-hover);
}

.button--primary:hover,
.button--primary:focus-visible {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
  box-shadow: inset 0 0 0 1px var(--color-primary-600);
}

.page-platform a:focus-visible,
.page-platform button:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* The wordmark inside headings: cap height, sitting on the baseline. */
.wordmark {
  display: inline-block;
  height: 0.8em;
  width: auto;
  vertical-align: -0.05em;
}

/* Section scaffolding --------------------------------------------------------
   Sections run full width (so bands can carry a background); content sits in
   .p-inner, which lines up with the hero's left edge at every width (same
   1096px column as the Specialty Practices page). */
.platform-section {
  padding: var(--section-space) 64px;
  /* Room for the sticky site header + section bar when jumping to a section. */
  scroll-margin-top: 120px;
}

.p-inner {
  width: 100%;
  max-width: 1096px;
  display: flex;
  flex-direction: column;
}

.p-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 820px;
}

/* Section headings: one step below the homepage (36 / 28 / 24). */
.p-title {
  margin: 0;
  font-family: var(--font-title-family);
  font-weight: 800;
  font-size: var(--font-size-6);
  line-height: 1.15;
  letter-spacing: -0.6px;
  color: var(--color-neutral-900);
}

.p-lead {
  margin: 0;
  font-size: 17px; /* FLAG: no token */
  line-height: 1.55;
  color: var(--color-neutral-500);
}

.p-note {
  margin: 0;
  font-size: 12px; /* FLAG: no token */
  line-height: 1.5;
  color: var(--color-neutral-500);
}

.p-link {
  align-self: flex-start;
  font-weight: var(--font-weight-bold);
  font-size: 15px; /* FLAG: no token */
  color: var(--color-secondary-500);
  text-decoration: none;
}

.p-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Hero (N2): text on the left, "On this page" card on the right ----------- */

.opener {
  padding: var(--section-space-top) 64px var(--section-space);
  background: linear-gradient(135deg, #ffffff 0%, var(--color-primary-25) 35%, var(--color-primary-50) 70%, var(--color-accent2-50) 100%);
}

.opener__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 64px;
  align-items: center;
  max-width: 1096px;
  width: 100%;
}

.opener__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.opener__title {
  margin: 0;
  font-family: var(--font-title-family);
  font-weight: 800;
  font-size: 44px; /* FLAG: no token (matches the Specialty hero) */
  line-height: 1.12;
  letter-spacing: -1px;
  color: var(--color-neutral-900);
}

.opener__subtitle {
  margin: 0;
  font-size: 17px; /* FLAG: no token */
  line-height: 1.55;
  color: var(--color-neutral-500);
}

.pnav-card {
  padding: 22px 26px 8px;
  border-radius: 24px;
  background: var(--color-white);
  box-shadow: 0 1px 0 var(--color-primary-200), 0 18px 40px rgba(98, 4, 117, 0.08);
}

.pnav-card__label {
  margin: 0 0 12px;
  font-size: 12px; /* FLAG: no token */
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-neutral-400);
}

.pnav-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pnav-card__link {
  display: grid;
  grid-template-columns: 36px 1fr 20px;
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--color-primary-100);
  text-decoration: none;
}

.pnav-card__num {
  padding-top: 3px;
  font-size: 13px; /* FLAG: no token */
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-500);
}

.pnav-card__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pnav-card__title {
  font-size: 17px; /* FLAG: no token */
  font-weight: 800;
  color: var(--color-neutral-900);
}

.pnav-card__desc {
  font-size: var(--font-size-1);
  line-height: 1.45;
  color: var(--color-neutral-500);
}

.pnav-card__arrow {
  padding-top: 2px;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-600);
  transition: transform var(--transition-hover);
}

.pnav-card__link:hover .pnav-card__title {
  color: var(--color-primary-600);
}

.pnav-card__link:hover .pnav-card__arrow {
  transform: translateY(3px);
}

/* Sticky section bar ---------------------------------------------------------
   Fixed under the site header; slides in once the hero card is out of view.
   --pnav-top is set from the header's real height in platform.js. */
.pnav-bar {
  position: fixed;
  top: var(--pnav-top, 78px);
  left: 0;
  right: 0;
  z-index: 90;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--color-primary-200);
  box-shadow: 0 6px 16px rgba(52, 3, 44, 0.05);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.pnav-bar.is-visible {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.pnav-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1096px;
  margin: 0 auto;
  padding: 0 64px;
  box-sizing: content-box;
}

.pnav-bar__list {
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pnav-bar__link {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 4px;
  border-bottom: 2px solid transparent;
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-400);
  text-decoration: none;
  white-space: nowrap;
}

.pnav-bar__num {
  font-size: 12px; /* FLAG: no token */
  font-weight: 800;
  color: var(--color-neutral-300);
}

.pnav-bar__link:hover {
  color: var(--color-neutral-900);
}

.pnav-bar__link[aria-current="true"] {
  border-bottom-color: var(--color-primary-500);
  font-weight: 800;
  color: var(--color-neutral-900);
}

.pnav-bar__link[aria-current="true"] .pnav-bar__num {
  color: var(--color-primary-500);
}

.pnav-bar__status {
  font-size: 13px; /* FLAG: no token */
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-400);
  white-space: nowrap;
}

.pnav-bar__toggle {
  display: none;
}

.pnav-bar__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: calc(var(--pnav-progress, 0) * 100%);
  background: var(--color-primary-500);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 01 · The open loop problem (B1: one centered statement) ------------------- */

.pl-open {
  padding-top: 96px; /* FLAG: no token */
  padding-bottom: 112px; /* FLAG: no token */
}

.pl-statement {
  align-items: center;
  gap: 20px;
  text-align: center;
}

.pl-statement__title {
  max-width: 760px;
  margin: 0;
  font-family: var(--font-title-family);
  font-size: 40px; /* FLAG: no token */
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--color-neutral-900);
}

.pl-statement__lead {
  max-width: 620px;
  margin: 0;
  font-size: 17px; /* FLAG: no token */
  line-height: 1.55;
  color: var(--color-neutral-500);
}

.pl-statement__pair {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 22px; /* FLAG: no token */
  line-height: 1.45;
  font-weight: var(--font-weight-bold);
}

.pl-statement__today {
  color: #8a8594; /* FLAG: no token (loop "open" gray) */
}

.pl-statement__carrie {
  color: var(--color-primary-500);
}

.pl-statement__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.pl-statement__see {
  margin: 0;
  font-size: 15px; /* FLAG: no token */
  color: var(--color-neutral-500);
}

.pl-statement__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 32px;
  margin: 0;
}

/* 02 · Closing the loop -------------------------------------------------------- */

.pc {
  background: var(--color-primary-25);
  border-top: 1px solid var(--color-primary-100);
  border-bottom: 1px solid var(--color-primary-100);
}

/* The loop is drawn at 1096 × 474 (the column width) and scaled down by
   platform.js (--s) when the column is narrower. Below 1100px it switches to
   two stacked cards. */
.pc-loop {
  --s: 1;
  position: relative;
  height: calc(474px * var(--s));
  margin-top: 48px;
}

.pc-loop__stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1096px;
  height: 474px;
  transform: scale(var(--s));
  transform-origin: top left;
}

.pc-loop__svg {
  position: absolute;
  inset: 0;
  overflow: visible;
  font-family: var(--font-body-regular-family);
}

/* White spotlight on the patient's lobe. */
.pc-loop__spot {
  filter: drop-shadow(0 10px 24px rgba(98, 4, 117, 0.07));
}

/* Each lobe's text is centered in its half of the figure-eight. */
.pc-lobe {
  position: absolute;
  top: 237px;
  width: 300px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pc-lobe--care {
  left: 96px; /* centered on x = 246 */
}

.pc-lobe--patient {
  left: 700px; /* centered on x = 850 */
}

.pc-lobe__title {
  margin: 0;
  font-size: var(--font-size-4);
  font-weight: 800;
  color: var(--color-neutral-900);
}

.pc-lobe__steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pc-lobe__step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
}

.pc-lobe__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  font-size: 12px; /* FLAG: no token */
  font-weight: 800;
}

.pc-lobe__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pc-lobe__name {
  font-size: var(--font-size-2);
  font-weight: 800;
  color: var(--color-neutral-900);
}

.pc-lobe__desc {
  font-size: var(--font-size-1);
  line-height: 1.45;
  color: var(--color-neutral-500);
}

/* Conversation card: a speech tail points up at the patient side of the loop,
   with the teal "patient calls" lane dropping into it. */
.pc-conv {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 36px;
  padding: 36px 40px;
  border-radius: 24px;
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-primary-200);
}

.pc-conv__tail {
  position: absolute;
  top: -26px;
  left: calc(var(--tail-x) - 30px);
  overflow: visible;
}

/* Dotted teal line from the loop's patient lane down to the tail's tip. */
.pc-conv__lane {
  position: absolute;
  left: calc(var(--tail-x) - 2px);
  bottom: calc(100% + 23px);
  width: 4px;
  height: calc(29px * var(--s, 1) + 13px);
  background: radial-gradient(circle, var(--color-accent1-600) 1.3px, transparent 1.7px) center top / 4px 9px repeat-y;
}

/* Small tag marking illustrative examples (placeholder patients, Programs). */
.p-tag {
  flex-shrink: 0;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-neutral-100);
  font-size: 12px; /* FLAG: no token */
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  color: var(--color-neutral-600);
  white-space: nowrap;
}

.p-tag--inline {
  align-self: flex-start;
  margin-bottom: 6px;
}

.pc-conv__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}

.pc-conv__title {
  margin: 0;
  font-size: 24px; /* FLAG: no token */
  line-height: 1.25;
  font-weight: 800;
  color: var(--color-neutral-900);
}

/* Two calls side by side, split by a hairline. */
.pc-conv__calls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: 40px;
  align-items: stretch;
}

.pc-conv__rule {
  background: var(--color-neutral-100);
}

.pc-call {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Call header, ruled off from the conversation: solid magenta for Carrie's
   call, dotted teal for the patient's. */
.pc-call__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
}

.pc-call--out .pc-call__head {
  border-bottom: 2px solid var(--color-primary-500);
}

.pc-call--in .pc-call__head {
  border-bottom: 2px dotted var(--color-accent1-600);
}

.pc-call__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

.pc-call--out .pc-call__icon,
.pc-call--out .pc-call__title {
  color: var(--color-primary-500);
}

.pc-call--in .pc-call__icon,
.pc-call--in .pc-call__title {
  color: var(--color-accent1-600);
}

.pc-call__titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pc-call__title {
  font-size: 15px; /* FLAG: no token */
  font-weight: 800;
}

.pc-call__kind {
  font-size: 13px; /* FLAG: no token */
  color: var(--color-neutral-500);
}

.pc-call__msgs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pc-msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pc-msg--carrie {
  align-items: flex-start;
}

.pc-msg--patient {
  align-items: flex-end;
}

.pc-msg__who {
  font-size: 12px; /* FLAG: no token */
  font-weight: var(--font-weight-bold);
}

.pc-msg--carrie .pc-msg__who {
  color: var(--color-primary-500);
}

.pc-msg--patient .pc-msg__who {
  color: var(--color-accent1-600);
}

.pc-msg__bubble {
  max-width: 92%;
  padding: 12px 16px;
  font-size: 14.5px; /* FLAG: no token */
  line-height: 1.5;
  color: var(--color-neutral-900);
}

/* Carrie in pink, the patient in pale teal. */
.pc-msg--carrie .pc-msg__bubble {
  border-radius: 16px 16px 16px 6px;
  background: var(--color-primary-50);
  box-shadow: inset 0 0 0 1px var(--color-primary-100);
}

.pc-msg--patient .pc-msg__bubble {
  border-radius: 16px 16px 6px 16px;
  background: var(--color-accent1-50);
}

.pc-call__result {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: auto 0 0;
  font-size: 13px; /* FLAG: no token */
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-600);
}

.pc-call__check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary-500);
  color: var(--color-white);
}

/* Z1 stat sits under the patient's call. */
.pc-conv__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: 40px;
}

.pc-stat {
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
}

.pc-stat__num {
  font-size: 64px; /* FLAG: no token */
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--color-secondary-500);
}

.pc-stat__text {
  padding-left: 18px;
  border-left: 2px solid var(--color-secondary-100);
  font-size: var(--font-size-2);
  line-height: 1.45;
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-900);
}

.pc-stat__text sup {
  font-weight: 400;
  color: var(--color-neutral-500);
}

/* 03 · Programs ------------------------------------------------------------------
   An example Program card on the left (built from four stacked parts so each
   claim on the right can line up with the part that proves it). */

.pg-grid {
  display: grid;
  grid-template-columns: 560px minmax(0, 1fr);
  column-gap: 72px;
  margin-top: 56px;
}

.pg-part {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 32px;
  background: var(--color-white);
  box-shadow: inset 1px 0 0 var(--color-neutral-200), inset -1px 0 0 var(--color-neutral-200);
}

.pg-part--1 {
  border-radius: 24px 24px 0 0;
  box-shadow: inset 1px 0 0 var(--color-neutral-200), inset -1px 0 0 var(--color-neutral-200), inset 0 1px 0 var(--color-neutral-200);
}

.pg-part--4 {
  grid-column: 1;
  padding-bottom: 26px;
  border-radius: 0 0 24px 24px;
  box-shadow: inset 1px 0 0 var(--color-neutral-200), inset -1px 0 0 var(--color-neutral-200), inset 0 -1px 0 var(--color-neutral-200);
}

/* Numbered marker on the card's right edge. */
.pg-mark {
  position: absolute;
  right: -12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary-500);
  color: var(--color-white);
  font-size: 12px; /* FLAG: no token */
  font-weight: 800;
}

.pg-part--1 .pg-mark { top: 46px; }
.pg-part--2 .pg-mark { top: 34px; }
.pg-part--3 .pg-mark { top: 96px; }

.pg-card-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 0 24px;
  border-bottom: 1px solid var(--color-neutral-100);
}

.pg-card-head__titles {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pg-card-head__title {
  margin: 0;
  font-size: 21px; /* FLAG: no token */
  font-weight: 800;
  color: var(--color-neutral-900);
}

.pg-card-head__meta {
  margin: 0;
  font-size: 13.5px; /* FLAG: no token */
  color: var(--color-neutral-500);
}

.pg-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 14px 9px 11px;
  border-radius: 12px;
  background: var(--color-primary-50);
  box-shadow: inset 0 0 0 1px var(--color-primary-100);
}

.pg-badge__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.pg-badge__title {
  font-size: 13px; /* FLAG: no token */
  font-weight: 800;
  color: var(--color-neutral-900);
}

.pg-badge__by {
  font-size: 12px; /* FLAG: no token */
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-400);
}

/* The day rail. */
.pg-railrow {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 18px;
}

.pg-railrow::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-primary-200);
}

.pg-railrow--first {
  padding-top: 24px;
}

.pg-railrow--first::before {
  top: 64px;
}

.pg-railrow--later {
  align-items: center;
  padding: 8px 0;
}

.pg-railrow--last::before {
  bottom: auto;
  height: 16px;
}

.pg-day {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: inset 0 0 0 2px var(--color-primary-200);
  color: var(--color-primary-600);
  line-height: 1;
}

.pg-day--on {
  background: var(--color-primary-500);
  box-shadow: none;
  color: var(--color-white);
}

.pg-day__label {
  font-size: 9px; /* FLAG: no token */
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}

.pg-day__num {
  font-size: 15px; /* FLAG: no token */
  font-weight: 800;
}

.pg-ask {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  padding-bottom: 8px;
}

.pg-ask__who {
  font-size: 12px; /* FLAG: no token */
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-500);
}

.pg-ask__bubble {
  padding: 12px 16px;
  border-radius: 16px 16px 16px 6px;
  background: var(--color-primary-50);
  box-shadow: inset 0 0 0 1px var(--color-primary-100);
  font-size: 15.5px; /* FLAG: no token */
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-900);
}

.pg-later {
  margin: 0;
  font-size: 15px; /* FLAG: no token */
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-600);
}

/* The patient's possible answers come in from the right (the patient's teal
   lane), drop into each answer, and each answer takes its own arrow. */
.pg-answers {
  position: relative;
  padding-bottom: 20px;
}

.pg-answers__label {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin: 0 0 2px;
  font-size: 12px; /* FLAG: no token */
  font-weight: var(--font-weight-bold);
  color: var(--color-accent1-600);
}

.pg-answers__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 12px 0 0;
  list-style: none;
}

/* The horizontal lane: from past the card's right edge to the first answer. */
.pg-answers__list::before {
  content: "";
  position: absolute;
  top: 12px;
  left: calc((100% - 20px) / 6);
  right: -12px;
  height: 2.2px;
  background: radial-gradient(circle, var(--color-accent1-600) 1.1px, transparent 1.5px) left center / 7px 3px repeat-x;
}

.pg-ans {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pg-ans__drop {
  margin-top: 1px;
}

.pg-ans__say,
.pg-ans__do {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  box-sizing: border-box;
  padding: 9px 10px;
  font-size: 13px; /* FLAG: no token */
  line-height: 1.35;
  text-align: center;
}

.pg-ans__say {
  border-radius: 14px 14px 4px 14px;
  background: var(--color-accent1-50);
  box-shadow: inset 0 0 0 1px var(--color-accent1-200);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-900);
}

.pg-ans__do {
  border-radius: 12px;
  font-weight: var(--font-weight-bold);
}

.pg-ans--calm .pg-ans__do {
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-neutral-200);
  color: var(--color-neutral-600);
}

.pg-ans--flag .pg-ans__do {
  background: var(--color-white);
  box-shadow: inset 0 0 0 1.5px var(--color-primary-950);
  color: var(--color-primary-950);
}

/* Same red as the emergency band on the For Patients page. */
.pg-ans--urgent .pg-ans__do {
  background: #fae6e7; /* FLAG: no token (For Patients emergency) */
  box-shadow: inset 0 0 0 1.5px #b43636;
  color: #b43636;
}

/* Claims beside the card, joined to its markers by a dotted leader. */
.pg-note {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 12px;
}

.pg-note--1 { padding-top: 44px; }
.pg-note--2 { padding-top: 32px; }
.pg-note--3 { padding-top: 94px; }

.pg-note::before {
  content: "";
  position: absolute;
  left: -60px;
  width: 52px;
  border-top: 2px dotted var(--color-primary-200);
}

.pg-note--1::before { top: 57px; }
.pg-note--2::before { top: 45px; }
.pg-note--3::before { top: 107px; }

/* The note's own number only shows when the notes stack under the card. */
.pg-note__mark {
  display: none;
}

.pg-note__title {
  margin: 0;
  font-size: 19px; /* FLAG: no token */
  font-weight: 800;
  color: var(--color-neutral-900);
}

.pg-note__text {
  margin: 0;
  font-size: var(--font-size-2);
  line-height: 1.6;
  color: var(--color-neutral-500);
}

/* Library + hands-on scale. */
.pg-lower {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 72px;
  align-items: start;
  margin-top: 56px;
  padding-top: 56px;
  border-top: 1px solid var(--color-neutral-200);
}

.pg-sub {
  margin: 0;
  font-size: 22px; /* FLAG: no token */
  font-weight: 800;
  color: var(--color-neutral-900);
}

.pg-body {
  margin: 0;
  font-size: var(--font-size-2);
  line-height: 1.6;
  color: var(--color-neutral-500);
}

.pg-lib,
.pg-scale {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pg-lib__intro,
.pg-scale__intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pg-lib__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.pg-lib__head {
  margin: 0 0 8px;
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-500);
}

.pg-lib__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pg-lib__list li {
  padding: 11px 0;
  border-top: 1px solid var(--color-neutral-100);
  font-size: var(--font-size-2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-900);
}

.pg-scale {
  padding: 32px;
  border-radius: 24px;
  background: var(--color-primary-25);
  box-shadow: inset 0 0 0 1px var(--color-primary-100);
}

.pg-scale__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pg-scale__stop {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
  padding-bottom: 26px;
}

.pg-scale__stop:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 26px;
  bottom: 0;
  width: 2px;
  background: var(--color-primary-200);
}

.pg-scale__stop:last-child {
  padding-bottom: 0;
}

.pg-scale__dot {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: inset 0 0 0 2px var(--color-primary-500);
}

.pg-scale__stop--2 .pg-scale__dot { background: var(--color-primary-200); }
.pg-scale__stop--3 .pg-scale__dot { background: var(--color-primary-500); }

.pg-scale__copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 2px;
}

.pg-scale__name {
  font-size: 17px; /* FLAG: no token */
  font-weight: 800;
  color: var(--color-neutral-900);
}

.pg-scale__text {
  font-size: 15px; /* FLAG: no token */
  line-height: 1.5;
  color: var(--color-neutral-500);
}

.pg-audit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--color-neutral-200);
}

.pg-audit__text {
  margin: 0;
  font-size: var(--font-size-2);
  line-height: 1.55;
  color: var(--color-neutral-600);
}

.pg-audit .p-link {
  align-self: center;
  white-space: nowrap;
}

/* 04 · Integration (I2: around the record) ---------------------------------------- */

.pi {
  border-top: 1px solid var(--color-neutral-200);
}

.pi-flow {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}

.pi-ehr {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 28px;
  border-radius: 24px;
  background: var(--color-primary-25);
  box-shadow: inset 0 0 0 1px var(--color-primary-100);
}

.pi-ehr__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 24px;
}

.pi-ehr__title {
  margin: 0;
  font-size: 21px; /* FLAG: no token */
  font-weight: 800;
  color: var(--color-neutral-900);
}

.pi-ehr__text {
  margin: 0;
  font-size: 14.5px; /* FLAG: no token */
  color: var(--color-neutral-500);
}

.pi-ehr__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pi-ehr__list li {
  padding: 9px 16px;
  border-radius: 12px;
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-neutral-200);
  font-size: 15px; /* FLAG: no token */
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-900);
  white-space: nowrap;
}

/* Lines rising back to the EHR: dotted from "Reads", solid from "Writes back". */
.pi-links {
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr;
  height: 30px;
}

.pi-links__read,
.pi-links__write {
  justify-self: center;
  width: 2.5px;
  height: 100%;
}

.pi-links__read {
  grid-column: 1;
  background: linear-gradient(var(--color-primary-500) 50%, transparent 50%) top / 2.5px 8px repeat-y;
}

.pi-links__write {
  grid-column: 5;
  background: var(--color-primary-500);
}

.pi-steps {
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pi-steps__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pi-arrow {
  display: flex;
  color: var(--color-neutral-300);
}

.pi-step {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 14px;
  border-radius: 24px;
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-neutral-200);
}

.pi-step__num {
  margin: 0 0 14px;
  font-size: 13px; /* FLAG: no token */
  font-weight: 800;
  color: var(--color-secondary-500);
}

.pi-step--writes .pi-step__num {
  color: var(--color-primary-500);
}

.pi-step__title {
  margin: 0;
  font-size: 21px; /* FLAG: no token */
  font-weight: 800;
  color: var(--color-neutral-900);
}

.pi-step__sub {
  margin: 4px 0 14px;
  font-size: 14.5px; /* FLAG: no token */
  line-height: 1.5;
  color: var(--color-neutral-500);
}

.pi-step__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pi-step__list li {
  padding: 9px 0;
  border-top: 1px solid var(--color-neutral-100);
  font-size: 14.5px; /* FLAG: no token */
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-900);
}

.pi-quote {
  max-width: 760px;
  margin: 48px auto 0;
  text-align: center;
  font-family: var(--font-title-family);
  font-size: 30px; /* FLAG: no token */
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--color-neutral-900);
}

/* Closing CTA ---------------------------------------------------------------
   Full-width pale pink band (no card): title, line and button on the left;
   the two audiences as rows on the right. Redesigned 2026-10-20. */
.platform-cta {
  padding: var(--section-space) 64px;
  background: var(--color-primary-25);
  border-top: 1px solid var(--color-primary-100);
}

.platform-cta__inner {
  width: 100%;
  max-width: 1096px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.platform-cta__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.platform-cta__title {
  margin: 0;
  font-family: var(--font-title-family);
  font-weight: 800;
  font-size: 44px; /* FLAG: no token */
  line-height: 1.15;
  letter-spacing: -0.8px;
  color: var(--color-neutral-900);
}

.platform-cta__logo {
  display: inline-block;
  height: 0.8em;
  width: auto;
  vertical-align: -0.05em;
}

.platform-cta__lead {
  margin: 0;
  font-family: var(--font-body-regular-family);
  font-size: 17px; /* FLAG: no token */
  line-height: 1.55;
  color: var(--color-neutral-500);
}

.platform-cta__button {
  margin-top: 6px;
}

.platform-cta__audiences {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-secondary-100);
}

.platform-cta__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-secondary-100);
  text-decoration: none;
}

.platform-cta__row-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.platform-cta__row-title {
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-3);
  color: var(--color-secondary-500);
}

.platform-cta__row-desc {
  font-size: var(--font-size-1);
  line-height: 1.45;
  color: var(--color-neutral-500);
}

.platform-cta__row-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-secondary-50);
  color: var(--color-secondary-500);
  font-size: var(--font-size-3);
  transition: background-color var(--transition-hover), color var(--transition-hover);
}

.platform-cta__row:hover .platform-cta__row-title,
.platform-cta__row:focus-visible .platform-cta__row-title {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.platform-cta__row:hover .platform-cta__row-arrow,
.platform-cta__row:focus-visible .platform-cta__row-arrow {
  background: var(--color-secondary-500);
  color: var(--color-white);
}

.page-footnotes {
  max-width: 1224px;
  width: 100%;
  margin: 0;
  padding: 24px 64px 40px;
  box-sizing: border-box;
  font-family: var(--font-body-regular-family);
  font-size: 12px;
  line-height: 1.8;
  color: var(--color-neutral-500);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* The closing-the-loop diagram needs ~1000px; below that the two sides
   become cards and the conversation's tail points at the patient card. */
@media (max-width: 1100px) {
  .opener__inner {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
  }

  .opener__title {
    font-size: 38px; /* FLAG: no token */
  }

  .pc-loop {
    height: auto;
  }

  .pc-loop__stage {
    position: static;
    width: auto;
    height: auto;
    transform: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .pc-loop__svg,
  .pc-conv__lane {
    display: none;
  }

  .pc-lobe {
    position: static;
    width: auto;
    transform: none;
    padding: 28px;
    border-radius: 24px;
  }

  .pc-lobe--care {
    box-shadow: inset 0 0 0 2px var(--color-primary-200);
  }

  .pc-lobe--patient {
    background: var(--color-white);
    box-shadow: 0 10px 24px rgba(98, 4, 117, 0.07);
    outline: 2.5px dotted var(--color-accent1-600);
    outline-offset: 6px;
  }

  .pc-conv {
    --tail-x: calc(75% + 5px) !important;
    margin-top: 44px;
  }

  .pg-grid {
    grid-template-columns: 500px minmax(0, 1fr);
    column-gap: 64px;
  }

  .pg-note::before {
    left: -52px;
    width: 44px;
  }
}

@media (max-width: 1024px) {
  .pg-grid {
    grid-template-columns: 480px minmax(0, 1fr);
    column-gap: 56px;
  }

  .pg-note::before {
    left: -44px;
    width: 36px;
  }

  .pg-lower {
    gap: 48px;
  }
}

/* Below 900px the claims stack under the Program card, each with its number. */
@media (max-width: 900px) {
  .opener__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .pnav-card {
    max-width: 560px;
  }

  .platform-cta__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .pnav-bar__inner {
    position: relative;
    padding: 0 32px;
  }

  .pnav-bar__status {
    display: none;
  }

  .pnav-bar__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    height: 48px;
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-900);
    cursor: pointer;
  }

  .pnav-bar__caret {
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-primary-600);
    border-bottom: 2px solid var(--color-primary-600);
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--transition-hover);
  }

  .pnav-bar__toggle[aria-expanded="true"] .pnav-bar__caret {
    transform: translateY(2px) rotate(225deg);
  }

  .pnav-bar__list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 4px 32px 12px;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-primary-200);
    box-shadow: 0 12px 24px rgba(52, 3, 44, 0.08);
  }

  .pnav-bar.is-open .pnav-bar__list {
    display: flex;
  }

  .pnav-bar__link {
    height: 44px;
    border-bottom: none;
  }

  .pnav-bar__link[aria-current="true"] {
    color: var(--color-primary-600);
  }

  .pc-conv__calls,
  .pc-conv__foot {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .pc-conv__rule {
    height: 1px;
  }

  .pc-stat {
    grid-column: 1;
  }

  .pg-grid {
    grid-template-columns: minmax(0, 560px);
  }

  .pg-part--1 { order: 1; }
  .pg-part--2 { order: 2; }
  .pg-part--3 { order: 3; }
  .pg-part--4 { order: 4; }
  .pg-note--1 { order: 5; }
  .pg-note--2 { order: 6; }
  .pg-note--3 { order: 7; }

  .pg-note--1 {
    margin-top: 32px;
  }

  .pg-note,
  .pg-note--1,
  .pg-note--2,
  .pg-note--3 {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 4px;
    padding: 14px 0;
  }

  .pg-note::before {
    display: none;
  }

  .pg-note__mark {
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--color-primary-500);
    color: var(--color-white);
    font-size: 12px; /* FLAG: no token */
    font-weight: 800;
  }

  .pg-lower {
    grid-template-columns: 1fr;
  }

  .pi-links {
    display: none;
  }

  .pi-flow {
    gap: 16px;
  }

  .pi-steps {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .pi-steps__arrow {
    height: 28px;
  }

  .pi-arrow {
    transform: rotate(90deg);
  }
}

@media (max-width: 768px) {
  .opener,
  .platform-section {
    padding-left: 32px;
    padding-right: 32px;
  }

  .platform-cta {
    padding: var(--section-space) var(--space-lg);
  }

  .platform-cta__title {
    font-size: 36px; /* FLAG: no token */
  }

  .opener__title {
    font-size: 36px; /* FLAG: no token */
  }

  .p-title {
    font-size: var(--font-size-5);
  }

  .pl-open {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
  }

  .pl-statement__title {
    font-size: 32px; /* FLAG: no token */
  }

  .pl-statement__pair {
    font-size: 19px; /* FLAG: no token */
  }

  .pc-loop__stage {
    grid-template-columns: 1fr;
  }

  .pc-conv {
    --tail-x: 50% !important;
    padding: 28px 24px;
  }

  .pi-quote {
    font-size: 24px; /* FLAG: no token */
  }

  .page-footnotes {
    padding: 24px 32px 40px;
  }
}

/* Small screens: each possible answer becomes a row (answer → what Carrie
   does) so the boxes stay readable. */
@media (max-width: 600px) {
  .pg-part {
    padding: 0 20px;
  }

  .pg-card-head {
    flex-wrap: wrap;
  }

  .pg-answers__list {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 4px;
  }

  .pg-answers__list::before,
  .pg-ans__drop {
    display: none;
  }

  .pg-ans {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
  }

  .pg-ans__arrow {
    justify-self: center;
    transform: rotate(-90deg);
  }

  .pg-ans__say,
  .pg-ans__do {
    min-height: 48px;
  }

  .pg-lib__cols {
    gap: 24px;
  }

  .pg-scale {
    padding: 24px 20px;
  }

  .pg-audit {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .pg-audit .p-link {
    align-self: flex-start;
  }

  .pc-stat__num {
    font-size: 48px; /* FLAG: no token */
  }
}

@media (max-width: 480px) {
  .opener,
  .platform-section {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .platform-cta {
    padding: var(--section-space) var(--space-md);
  }

  .opener__title {
    font-size: 32px; /* FLAG: no token */
  }

  .platform-cta__title {
    font-size: 32px; /* FLAG: no token */
  }

  .platform-cta__row-title {
    font-size: var(--font-size-2);
  }

  .p-title {
    font-size: var(--font-size-4);
  }

  .pnav-card {
    padding: 18px 20px 4px;
  }

  .pnav-bar__inner,
  .pnav-bar__list {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .pl-statement__title {
    font-size: 28px; /* FLAG: no token */
  }

  .pc-lobe {
    padding: 22px 20px;
  }

  .pc-conv {
    padding: 24px 18px;
  }

  .pg-lib__cols {
    grid-template-columns: 1fr;
  }

  .pi-ehr {
    padding: 20px;
  }

  .pi-step {
    padding: 22px 20px 10px;
  }

  .page-footnotes {
    padding: 24px var(--space-md) 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pnav-bar,
  .pnav-bar.is-visible {
    transition: none;
  }
}