/* =========================================================
   Patient Intelligence — pi-

   Loaded after /index.css and /pages/products/products.css. Almost
   everything on this page is the shared product vocabulary: .pr-ui for
   every screen, .pr-kpi / .pr-meters / .pr-bar / .pr-chart / .pr-snap
   for the numbers, .pr-node and its connectors for the two drawings,
   .pr-sig for an insight, .pr-sched + .pr-paper for the reporting
   section, .pr-faq, .pr-final, .pr-pnav. What is here is the handful
   of shapes this page needs that no other page has:

     .pi-cmd      the hero's intelligence command view
     .pi-tl       a VERTICAL patient timeline — the brief asks for a
                  timeline rather than a dashboard, and asks that it
                  not repeat the Patient 360 page, whose .p3-time runs
                  horizontally
     .pi-jrn      the six-stage journey, which is a tab strip wearing a
                  rail: selecting a stage opens its numbers
     .pi-seg      the population map, which transforms when a group is
                  opened
     .pi-feed     the insight feed, lit one at a time
     .pi-engine   the AI section, the one surface on the page that is
                  deliberately drawn rather than tabulated
     .pi-story    the worked example beside it

   A NOTE ON THE BRIEF'S COLOUR. The brief specifies Wisemelon Green
   #16C542 as the accent. That is the pre-rebrand palette; the site is
   MeloHealth and the accent is --brand #10a4ea. The brief's intent —
   accent on important KPI changes, active states, journey connections,
   CTAs and positive status — is followed exactly, in blue.

   RAILS. Every rail on this page is drawn by its own rows rather than
   as one absolutely positioned bar across the container, so it starts
   and ends on a marker centre whatever the rows contain and whatever
   the item count is. The container-bar version drifted on every
   stacked layout on the site (§9.5).
   ========================================================= */

.pi {
  --ink-num: var(--ink);
}

/* =========================================================
   01 HERO — the intelligence command view
   ========================================================= */
.pi-stage { position: relative; }
.pi-cmd .pr-ui__body { display: grid; gap: calc(22 * var(--u)); }
.pi-cmd .pr-kpis { gap: calc(16 * var(--u)) calc(18 * var(--u)); }
.pi-cmd__rates { padding-top: calc(4 * var(--u)); border-top: 1px solid var(--rule); }
.pi-cmd__rates > li { grid-template-columns: calc(150 * var(--u)) minmax(0, 1fr) calc(58 * var(--u)); padding: calc(11 * var(--u)) 0; }
.pi-cmd__jrn { display: grid; gap: calc(4 * var(--u)); padding-top: calc(16 * var(--u)); border-top: 1px solid var(--rule); }
.pi-cmd__time { margin-top: calc(18 * var(--u)); }
.pi-cmd__time > li { padding-right: calc(12 * var(--u)); }
.pi-cmd__time > li > b { font-size: calc(13.5 * var(--u)); }
.pi-cmd__time > li > time { font-size: calc(15 * var(--u)); font-weight: 700; color: var(--ink); }

/* the two readings of the insight the hero sequence moves between.
   display: block beats the UA's [hidden] { display: none }, so both
   readings render at once unless this is stated — the same trap
   products.css fixes for .pr-panel (§14.1) */
.pi-sig .pi-sig__a, .pi-sig .pi-sig__b { display: block; }
.pi-sig .pi-sig__a[hidden], .pi-sig .pi-sig__b[hidden] { display: none; }

.pi-replay {
  display: inline-flex; align-items: center; gap: calc(7 * var(--u));
  margin-top: calc(14 * var(--u)); padding: calc(7 * var(--u)) calc(14 * var(--u));
  border: 1px solid var(--rule); border-radius: 999px; background: #fff;
  font: inherit; font-size: calc(12.5 * var(--u)); font-weight: 700; color: var(--muted);
  cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease);
}
.pi-replay:hover { border-color: var(--brand-ico); color: var(--brand-ink); }
.pi-replay .i { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }

/* =========================================================
   02 PATIENT 360 — a vertical timeline, not a second dashboard
   ========================================================= */
.pi-360 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: calc(26 * var(--u)); align-items: start; }
.pi-360__side { display: grid; gap: calc(18 * var(--u)); }
.pi-360__facts { padding: calc(20 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; }

/* the rail is drawn by each row, from this dot's centre to the next one's */
.pi-tl { display: grid; margin-top: calc(24 * var(--u)); }
.pi-tl > li {
  position: relative;
  display: grid; grid-template-columns: calc(16 * var(--u)) minmax(0, 1fr);
  align-items: start; column-gap: calc(16 * var(--u));
  padding: calc(12 * var(--u)) 0;
}
.pi-tl > li::after {
  content: ""; position: absolute; left: calc(7 * var(--u));
  top: calc(20 * var(--u)); bottom: calc(-20 * var(--u));
  width: 2px; background: var(--divider);
}
.pi-tl > li:last-child::after { display: none; }
.pi-tl > li > i {
  position: relative; z-index: 1;                 /* above the rail, never under it */
  width: calc(16 * var(--u)); height: calc(16 * var(--u));
  border-radius: 50%; border: 2px solid var(--divider); background: #fff;
  transition: border-color .5s var(--ease), background .5s var(--ease);
}
.pi-tl > li > div { min-width: 0; }
.pi-tl b { display: block; font-size: calc(16.5 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.pi-tl time { display: block; margin-top: calc(3 * var(--u)); font-size: calc(13 * var(--u)); color: var(--muted); font-variant-numeric: tabular-nums; }
.pi-tl p { margin-top: calc(6 * var(--u)); font-size: calc(14.5 * var(--u)); line-height: calc(21 * var(--u)); color: var(--prose); }

/* state says itself in words as well as colour: the row carries its own label */
.pi-tl .done > i { border-color: var(--brand-ico); background: var(--brand); }
.pi-tl .now > i { border-color: var(--brand-ico); background: #fff; box-shadow: 0 0 0 calc(4 * var(--u)) var(--brand-soft); }
.pi-tl .now b { color: var(--brand-ink); }
.pi-tl .warn > i { border-color: var(--amber-ink); background: var(--amber); }
.pi-tl .warn b { color: var(--amber-ink); }
.pi-tl .warn::after { background: var(--divider); }

/* the rows arrive in order; the marker is never faded, only its text (§9.5) */
.pr-js .pi-tl > li > div { opacity: .4; transition: opacity .5s var(--ease); }
.pr-js .is-in .pi-tl > li > div { opacity: 1; transition-delay: calc(var(--i) * 150ms); }
.pr-js .pi-tl > li > i { border-color: var(--divider); background: #fff; }
.pr-js .is-in .pi-tl .done > i { border-color: var(--brand-ico); background: var(--brand); transition-delay: calc(var(--i) * 150ms); }
.pr-js .is-in .pi-tl .now > i { border-color: var(--brand-ico); transition-delay: calc(var(--i) * 150ms); }
.pr-js .is-in .pi-tl .warn > i { border-color: var(--amber-ink); background: var(--amber); transition-delay: calc(var(--i) * 150ms); }

/* =========================================================
   03 JOURNEY — a rail that is also a tab strip
   ========================================================= */
.pi-jrnwrap { display: grid; gap: calc(26 * var(--u)); }
.pi-jrn { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.pi-jrn > li { position: relative; min-width: 0; }
/* the segment runs from this marker's centre to the next one's — one column
   width — with a gap either side so it never touches a dot */
.pi-jrn > li:not(:last-child)::after {
  content: ""; position: absolute; z-index: 0;
  top: calc(23 * var(--u) - 1px);          /* the dot's centre: 16u padding + 7u */
  left: 50%; width: 100%;                  /* this marker's centre to the next one's */
  height: 2px; background: var(--divider);
}
.pi-jrn__st {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: calc(9 * var(--u));
  width: 100%; padding: calc(16 * var(--u)) calc(6 * var(--u));
  border: 0; background: none; font: inherit; color: inherit;
  cursor: pointer; text-align: center;
}
.pi-jrn__st > i {
  width: calc(14 * var(--u)); height: calc(14 * var(--u));
  border-radius: 50%; border: 2px solid var(--divider); background: #fff;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.pi-jrn__st > b { font-size: calc(14.5 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.pi-jrn__st > span { font-size: calc(18 * var(--u)); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.pi-jrn__st:hover > i { border-color: var(--brand-ico); }
.pi-jrn__st[aria-selected="true"] > i { border-color: var(--brand-ico); background: var(--brand); box-shadow: 0 0 0 calc(4 * var(--u)) var(--brand-soft); }
.pi-jrn__st[aria-selected="true"] > b { color: var(--brand-ink); }
.pi-jrn__st[aria-selected="true"] > span { color: var(--ink); }

.pi-jrn__panels { min-height: calc(210 * var(--u)); }
.pi-jrn__p { display: grid; align-content: start; gap: calc(12 * var(--u)); max-width: calc(620 * var(--u)); padding: calc(24 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; }
.pi-jrn__big { font-family: var(--font-head); font-size: calc(40 * var(--u)); line-height: calc(46 * var(--u)); font-weight: 500; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.pi-jrn__big small { font-family: var(--font-body); font-size: calc(16 * var(--u)); font-weight: 600; letter-spacing: 0; color: var(--muted); }
.pi-jrn__note { font-size: calc(15 * var(--u)); line-height: calc(23 * var(--u)); color: var(--prose); }

/* the drop-off drawing, and the copy beside it */
.pi-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: calc(34 * var(--u)); align-items: center; margin-top: calc(56 * var(--u)); }
.pi-split__copy { display: grid; align-content: start; gap: calc(14 * var(--u)); }
.pi-split__copy .pr-sub { margin-top: 0; }
.pi-drop__legs { gap: calc(14 * var(--u)); }

/* =========================================================
   04 RETENTION — one number and its trend, not three cards
   ========================================================= */
.pi-ret__big { display: grid; gap: calc(4 * var(--u)); }
.pi-ret__v { font-family: var(--font-head); font-size: calc(68 * var(--u)); line-height: calc(74 * var(--u)); font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pi-ret__chart { margin-top: calc(6 * var(--u)); }
.pi-ret__snap { margin-top: calc(26 * var(--u)); padding-top: calc(6 * var(--u)); border-top: 1px solid var(--rule); }

/* =========================================================
   05 ENGAGEMENT / EXPERIENCE
   ========================================================= */
.pi-ee { display: grid; gap: calc(24 * var(--u)); }
.pi-ee__p { padding: calc(26 * var(--u)) calc(28 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; }
.pi-ee__ins { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(20 * var(--u)); padding-top: calc(18 * var(--u)); border-top: 1px solid var(--rule); font-size: calc(16 * var(--u)); color: var(--prose); }

/* =========================================================
   06 FOLLOW-UP — an attention queue
   ========================================================= */
.pi-fu { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: calc(26 * var(--u)); align-items: start; }
.pi-fu__triad { margin-top: 0; }
.pi-fu__triad > li > b { font-family: var(--font-head); font-size: calc(30 * var(--u)); line-height: calc(36 * var(--u)); font-weight: 500; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.pi-fu__q { margin-top: calc(20 * var(--u)); border-top: 1px solid var(--rule); }
.pi-fu__q > li { border-bottom: 1px solid var(--rule); }
.pi-fu__q summary { display: flex; align-items: center; justify-content: space-between; gap: calc(14 * var(--u)); padding: calc(14 * var(--u)) 0; cursor: pointer; list-style: none; }
.pi-fu__q summary::-webkit-details-marker { display: none; }
.pi-fu__nm { display: flex; align-items: center; gap: calc(11 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
/* a small avatar for the queue — the shared .pr-av is the record-header size */
.pi-fu__nm > .pr-av { width: calc(30 * var(--u)); height: calc(30 * var(--u)); font-size: calc(11.5 * var(--u)); }
.pi-fu__q summary:hover .pi-fu__nm { color: var(--brand-ink); }
.pi-fu__d { padding: 0 0 calc(14 * var(--u)); }
.pi-fu__acts { display: flex; flex-wrap: wrap; gap: calc(18 * var(--u)); padding-bottom: calc(16 * var(--u)); }
.pi-fu__side { display: grid; gap: calc(18 * var(--u)); }
.pi-fu__card { display: grid; justify-items: start; gap: calc(7 * var(--u)); padding: calc(24 * var(--u)); border: 1px solid var(--amber-ink); border-radius: var(--r-card); background: var(--amber); }
.pi-fu__card > .pr-fl { color: var(--amber-ink); }
.pi-fu__v { font-family: var(--font-head); font-size: calc(52 * var(--u)); line-height: calc(58 * var(--u)); font-weight: 500; letter-spacing: -.04em; color: var(--amber-ink); font-variant-numeric: tabular-nums; }
.pi-fu__card .pr-verdict { background: #fff; }
.pi-fu__sub { margin-top: calc(6 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); color: var(--amber-ink); }
.pi-fu__links { display: grid; justify-items: start; gap: calc(13 * var(--u)); padding: calc(20 * var(--u)) calc(22 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; }

/* =========================================================
   07 SEGMENTS — a population that opens
   ========================================================= */
.pi-seg { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: calc(30 * var(--u)); align-items: start; }
.pi-seg__map { display: grid; justify-items: center; padding: calc(28 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; }
.pi-seg__all { display: grid; justify-items: center; gap: calc(4 * var(--u)); }
.pi-seg__tot { font-family: var(--font-head); font-size: calc(44 * var(--u)); line-height: calc(50 * var(--u)); font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pi-seg__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(14 * var(--u)); width: 100%; }
.pi-seg__b {
  display: grid; justify-items: start; gap: calc(5 * var(--u));
  padding: calc(18 * var(--u)) calc(20 * var(--u));
  border: 1px solid var(--rule); border-radius: var(--r); background: #fff;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.pi-seg__b:hover { border-color: var(--brand-ico); }
.pi-seg__b > b { font-family: var(--font-head); font-size: calc(26 * var(--u)); line-height: calc(32 * var(--u)); font-weight: 500; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.pi-seg__pc { font-size: calc(13 * var(--u)); font-weight: 600; color: var(--muted); }
.pi-seg__b[aria-selected="true"] { border-color: var(--brand-ico); background: var(--brand-soft); }
.pi-seg__b[aria-selected="true"] > b { color: var(--brand-ink); }
.pi-seg__b.warn > .pr-fl { color: var(--amber-ink); }
.pi-seg__b.warn[aria-selected="true"] { border-color: var(--amber-ink); background: var(--amber); }
.pi-seg__b.warn[aria-selected="true"] > b { color: var(--amber-ink); }
.pi-seg__p { display: grid; align-content: start; gap: calc(14 * var(--u)); padding: calc(28 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow); }
.pi-seg__v { font-family: var(--font-head); font-size: calc(48 * var(--u)); line-height: calc(54 * var(--u)); font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pi-seg__p .pr-go { margin-top: calc(6 * var(--u)); }

/* =========================================================
   08 INSIGHTS — lit one at a time
   ========================================================= */
.pi-feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(18 * var(--u)); }
.pi-feed__i {
  display: grid; align-content: start; gap: calc(8 * var(--u));
  padding: calc(26 * var(--u)) calc(26 * var(--u)) calc(22 * var(--u));
  border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff;
  transition: border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.pi-feed__i.is-lit { border-color: var(--brand-ico); box-shadow: var(--shadow); }
.pi-feed__v { font-family: var(--font-head); font-size: calc(38 * var(--u)); line-height: calc(44 * var(--u)); font-weight: 500; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.pi-feed__t { font-size: calc(15.5 * var(--u)); line-height: calc(23 * var(--u)); color: var(--prose); }
.pi-feed__i .pr-link { margin-top: calc(6 * var(--u)); }
/* the arrow in the kicker is a .pr-trend with no text: give it room */
.pi-feed__i .pr-k > .pr-trend { gap: 0; }

/* =========================================================
   09 AI — the one drawn surface on the page
   ========================================================= */
.pi-engine { display: grid; justify-items: center; }
.pi-engine__in { width: 100%; max-width: calc(840 * var(--u)); }
.pi-engine__sig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(10 * var(--u)); }
.pi-engine__sig > li {
  display: flex; align-items: center; gap: calc(9 * var(--u));
  padding: calc(11 * var(--u)) calc(14 * var(--u));
  border: 1px solid var(--rule); border-radius: var(--r-sm); background: #fff;
  font-size: calc(13.5 * var(--u)); font-weight: 600; color: var(--text);
}
.pi-engine__sig .pr-gl { color: var(--brand-ico); }
.pi-engine__core { width: 100%; display: grid; justify-items: center; }
.pi-engine__reason { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(8 * var(--u)); margin: calc(4 * var(--u)) 0; }
.pi-engine__reason > li {
  padding: calc(7 * var(--u)) calc(14 * var(--u));
  border: 1px dashed var(--brand-ico); border-radius: 999px;
  font-size: calc(12 * var(--u)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-ink);
}
.pi-engine__out { max-width: calc(840 * var(--u)); }
.pi-ai__facts { margin-top: calc(4 * var(--u)); }
.pi-ai__facts dt { color: var(--brand-ink); }
.pi-ai__facts dd { max-width: calc(260 * var(--u)); color: var(--brand-ink); }
.pi-ai__line { margin-top: calc(28 * var(--u)); font-size: calc(22 * var(--u)); line-height: calc(30 * var(--u)); }

/* the worked example. No row gap: the segment runs from one circle's centre
   to the next, and a gap in the grid is distance the segment never covers
   — the rows carry their own air as padding instead (§9.5). */
.pi-story { display: grid; gap: 0; }
.pi-story > li {
  position: relative;
  display: grid; grid-template-columns: calc(34 * var(--u)) minmax(0, 1fr);
  align-items: start; column-gap: calc(14 * var(--u));
  padding: calc(10 * var(--u)) 0;
}
.pi-story > li:not(:last-child)::after {
  content: ""; position: absolute; left: calc(16 * var(--u));
  top: calc(27 * var(--u)); bottom: calc(-27 * var(--u));   /* 10u padding + half the 34u circle */
  width: 2px; background: var(--rule);
}
.pi-story__n {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: calc(34 * var(--u)); height: calc(34 * var(--u));
  border-radius: 50%; border: 1px solid var(--rule); background: #fff;
  font-size: calc(11.5 * var(--u)); font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums;
}
/* the row has three children and two columns, so auto-placement drops the
   third onto row 2 COLUMN 1 — under the number, one word per line. Both the
   title and the note belong in column 2. */
.pi-story > li > b { grid-column: 2; display: block; padding-top: calc(7 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.pi-story > li > span:last-child { grid-column: 2; display: block; margin-top: calc(3 * var(--u)); font-size: calc(14 * var(--u)); color: var(--muted); }
.pi-story .warn .pi-story__n { border-color: var(--amber-ink); background: var(--amber); color: var(--amber-ink); }
.pi-story .warn b { color: var(--amber-ink); }

/* =========================================================
   10 REPORTS
   ========================================================= */
.pi-rep__name { margin-top: calc(5 * var(--u)); font-family: var(--font-head); font-size: calc(21 * var(--u)); line-height: calc(27 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.pi-rep__papers { min-width: 0; }

/* =========================================================
   11 ACTION
   ========================================================= */
.pi-act__chain { width: 100%; max-width: calc(560 * var(--u)); margin-inline: auto; }

/* =========================================================
   12 HUMAN
   ========================================================= */
.pi-human { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(44 * var(--u)); align-items: center; }
.pi-human__copy { display: grid; align-content: center; gap: 0; }
.pi-human .pr-photo img { height: calc(400 * var(--u)); }

/* =========================================================
   PHONES — stack, don't shrink (§10)
   ========================================================= */
@media (max-width: 1179px) {
  .pi-cmd .pr-ui__body { gap: 16px; }
  .pi-cmd__rates > li { grid-template-columns: minmax(0, 1fr) auto; }
  .pi-cmd__time { margin-top: 14px; }
  .pi-cmd__time > li > b { font-size: 14px; }
  .pi-cmd__time > li > time { font-size: 15px; }

  .pi-360, .pi-fu, .pi-seg, .pi-split, .pi-human { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pi-split { margin-top: 36px; }
  .pi-human { gap: 24px; }
  .pi-human .pr-photo img { height: 240px; }

  .pi-tl > li { grid-template-columns: 16px minmax(0, 1fr); column-gap: 14px; padding: 10px 0; }
  .pi-tl > li::after { left: 7px; top: 18px; bottom: -18px; }

  /* the journey scrolls sideways rather than squeezing six stages into 375px */
  .pi-jrn__scroll { margin-inline: -22px; padding-inline: 22px; overflow-x: auto; scrollbar-width: none; }
  .pi-jrn__scroll::-webkit-scrollbar { display: none; }
  .pi-jrn { min-width: 620px; }
  .pi-jrn > li:not(:last-child)::after { top: 18px; left: 50%; width: 100%; }  /* 12px padding + 7px */
  .pi-jrn__st { padding: 12px 4px; }
  .pi-jrn__st > b { font-size: 13px; }
  .pi-jrn__st > span { font-size: 16px; }
  .pi-jrn__panels { min-height: 0; }
  .pi-jrn__p { max-width: none; padding: 18px; }
  .pi-jrn__big { font-size: 32px; line-height: 38px; }

  .pi-ret__v { font-size: 46px; line-height: 52px; }
  .pi-ret__scroll { margin-inline: -18px; padding-inline: 18px; overflow-x: auto; scrollbar-width: none; }
  .pi-ret__scroll::-webkit-scrollbar { display: none; }
  .pi-ret__chart { min-width: 480px; }
  .pi-ret__snap { margin-top: 18px; }

  .pi-ee__p { padding: 18px; }
  .pi-ee__ins { font-size: 15px; }

  .pi-fu__triad > li > b { font-size: 24px; line-height: 30px; }
  .pi-fu__v { font-size: 40px; line-height: 46px; }
  .pi-fu__card, .pi-fu__links { padding: 18px; }

  .pi-seg__map { padding: 18px; }
  .pi-seg__grid { gap: 10px; }
  .pi-seg__b { padding: 14px; }
  .pi-seg__b > b { font-size: 22px; line-height: 28px; }
  .pi-seg__tot { font-size: 34px; line-height: 40px; }
  .pi-seg__p { padding: 20px; }
  .pi-seg__v { font-size: 36px; line-height: 42px; }

  /* the insight feed becomes a swipeable row (brief: mobile UX) */
  .pi-feed {
    grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none;
    margin-inline: -22px; padding-inline: 22px; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .pi-feed::-webkit-scrollbar { display: none; }
  .pi-feed__i { scroll-snap-align: start; padding: 20px; }
  .pi-feed__v { font-size: 30px; line-height: 36px; }

  .pi-engine__sig { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pi-engine__reason { flex-direction: column; align-items: center; }
  .pi-ai__line { font-size: 18px; line-height: 26px; margin-top: 20px; }
  .pi-ai__facts dd { max-width: none; }

  .pi-story > li { grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; }
  .pi-story > li:not(:last-child)::after { left: 14px; top: 25px; bottom: -25px; }  /* 10px + half the 30px circle */
  .pi-story__n { width: 30px; height: 30px; }
  .pi-story b { font-size: 15px; padding-top: 5px; }

  .pi-act__chain { max-width: none; }
  .pi-replay { margin-top: 12px; font-size: 12px; }
}

/* =========================================================
   REDUCED MOTION — the finished page, not a half-played one (§9.8)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .pi-tl > li > div { opacity: 1; }
  .pi-feed__i { border-color: var(--rule); box-shadow: none; }
  .pi-feed__i.is-lit { border-color: var(--brand-ico); }
}