/* ============================================================
   Medicare compliance — /medicare-compliance/
   Light hero (with the provenance line) → one card grid per item family, alternating tint →
   which-item pointer → advisory band → disclaimer. A requirement is a CARD, not a table row: the
   schedule's sentence, what we do, then the drawing, read top to bottom.
   Content: src/_data/compliance.json.
   ============================================================ */

.cp-hero { position:relative; overflow:hidden; padding:150px 0 var(--space-3xl);
  background:linear-gradient(180deg, var(--brand-50) 0%, #fff 72%); }
.cp-hero h1 { letter-spacing:-.02em; color:var(--color-secondary); max-width:15em; }
.cp-hero h1 .hl { color:var(--color-primary); }

/* /mbs-items/ only. Its hero is a heading and one line, where /medicare-compliance/ carries a
   provenance strip under the lede and needs the room — so the gap is trimmed on the page, not on
   the shared component. The section below already contributes --space-4xl (120px) of its own top
   padding, which is the real reason the stack read as too much. */
body.mbs-page .cp-hero { padding-bottom:var(--space-l); }

/* /medicare-compliance/ only. section.block carries --space-4xl top AND bottom, so two sections
   running together put ~240px between their content. Where the background CHANGES that reads as a
   deliberate band boundary; where it does not, it reads as a hole — which is what happens here,
   because the injected #particulars section shifts the tint parity and leaves
   #patient-attendance → #bulk-billing both plain, then #particulars → #exclusions → #which-item all
   tinted. Collapse the top padding on a same-background join so the gap is one section's worth.
   ⚠️ Scoped deliberately: 65 same-background joins exist across the site, and changing them all is
   a whole-site rhythm decision, not a fix for this page. */
body.mc-page section.block:not(.tint):not(.pale):not(.ad-band) + section.block:not(.tint):not(.pale):not(.ad-band),
body.mc-page section.block.tint + section.block.tint { padding-top:0; }

/* The provenance strip under the hero lede — three facts, scanned in one pass. */
/* One item now — the disclaimer. Kept as the strip rather than a plain paragraph so it stays
   visually separate from the lede above it. */
.cp-source { list-style:none; display:grid; grid-template-columns:1fr;
  gap:var(--space-l); max-width:48em; margin:var(--space-xl) 0 0; padding:var(--space-l) 0 0;
  border-top:1px solid var(--color-border-soft); }
.cp-source li { display:grid; gap:var(--space-3xs); }
.cp-source span { font-size:var(--text-xs); font-weight:var(--weight-extrabold); letter-spacing:.11em;
  text-transform:uppercase; color:var(--color-primary); }
.cp-source b { font-size:var(--text-sm); font-weight:var(--weight-medium); line-height:var(--line-normal);
  color:var(--color-ink-soft); }
/* The caveat is the third column, read alongside the provenance rather than under it. */
.cp-source a { color:var(--color-primary); }
@media (max-width:780px) { .cp-source { gap:var(--space-m); } }

/* ---- Which items this group's clause governs ---- */
.cp-applies { max-width:52em; margin:0 auto var(--space-xl); text-align:center; }
.cp-applies p { margin:0; font-size:var(--text-md); line-height:var(--line-relaxed); color:var(--color-ink-soft); }
.cp-applies-no { display:inline-block; margin:0 2px; padding:1px var(--space-2xs); border-radius:var(--radius-full);
  background:var(--color-surface); border:1px solid var(--color-border-soft); font-weight:var(--weight-bold); }
.cp-applies-no a { color:var(--color-primary); text-decoration:none; }
.cp-applies-note { margin-top:var(--space-s) !important; padding:var(--space-s) var(--space-m);
  border-radius:var(--radius-lg); background:var(--brand-25); font-size:var(--text-sm) !important;
  text-align:left; }
.cp-applies-note strong { color:var(--color-secondary); }

/* Several practitioner families claim for the same acts. Set as a two-column grid so the item
   numbers line up under each other and the eye can run down them; the li is display:contents so
   the label and the chips are the grid's own cells, not a nested box. */
.cp-applies-rows { display:grid; grid-template-columns:max-content max-content; justify-content:center;
  column-gap:var(--space-m); row-gap:var(--space-2xs); margin:var(--space-m) 0 0; padding:0; list-style:none;
  text-align:left; }
.cp-applies-rows li { display:contents; }
.cp-applies-rows b { align-self:center; font-weight:var(--weight-medium); font-size:var(--text-sm);
  color:var(--color-ink-soft); }
.cp-applies-after { margin-top:var(--space-m) !important; font-size:var(--text-sm) !important; }
@media (max-width:640px) {
  .cp-applies-rows { grid-template-columns:1fr; justify-content:stretch; text-align:center; row-gap:var(--space-xs); }
  .cp-applies-rows b { margin-top:var(--space-2xs); }
}

/* ---- The requirement list ----
   One row per requirement, read top to bottom in the clause's own order. Two columns: the schedule
   speaking on the left, and on the right one panel holding both what we do and the drawing of it —
   the copy wraps around the drawing, so the two are read as one thing rather than as two columns
   that happen to be adjacent. */
.cp-list { display:grid; }
.cp-row { display:grid; grid-template-columns:minmax(0,0.66fr) minmax(0,1.34fr); gap:var(--space-xl);
  align-items:start; padding:var(--space-2xl) 0; border-top:1px solid var(--color-border-soft); }
.cp-row:first-child { border-top:none; padding-top:var(--space-l); }

/* Left: the schedule. The number counts the acts as you read down them. */
.cp-req-top { display:flex; align-items:baseline; gap:var(--space-m); margin-bottom:var(--space-s); }
.cp-no { font-size:var(--step-1); font-weight:var(--weight-extrabold); letter-spacing:-.03em; line-height:1;
  color:var(--color-border); }
.cp-cite { font-size:var(--text-sm); font-weight:var(--weight-bold); }
.cp-cite a { color:var(--color-primary); }
/* The requirement is the page. It gets the panel; what we do sits beside it, unboxed.
   Sections alternate page-blue and white, so the panel swaps ground to stay a panel on both. */
.cp-req { border-left:3px solid var(--color-accent); border-radius:0 var(--radius-xl) var(--radius-xl) 0;
  padding:var(--space-l) var(--space-xl); background:var(--color-surface);
  border-top:1px solid var(--color-border-soft); border-right:1px solid var(--color-border-soft);
  border-bottom:1px solid var(--color-border-soft); box-shadow:var(--shadow-sm, var(--shadow-xs)); }
.cp-req-head { margin:0; font-size:var(--step-1); line-height:var(--line-tight); letter-spacing:-.015em;
  color:var(--color-secondary); }
.cp-req-detail { margin:var(--space-s) 0 0 !important; font-size:var(--text-md);
  line-height:var(--line-relaxed); color:var(--color-ink); }
.cp-req-note { margin:var(--space-m) 0 0 !important; padding:var(--space-s) var(--space-m);
  border-radius:var(--radius-lg); background:var(--brand-25); font-size:var(--text-sm) !important;
  line-height:var(--line-normal); color:var(--color-ink-soft); }

/* Right: what we do and the drawing of it, in one panel. overflow:hidden contains the float. */
/* Quiet ground, so what we do and the drawing of it read as ONE answer to the requirement rather
   than as two things that happen to sit side by side. The requirement keeps the crisp white card. */
.cp-demo { overflow:hidden; padding:var(--space-l) var(--space-xl); border-radius:var(--radius-xl);
  background:var(--brand-25); border:1px solid var(--color-border-soft); }
.cp-demo-mock { float:right; width:min(304px, 44%); margin:var(--space-2xs) 0 var(--space-m) var(--space-xl); }
/* A drawing that reads across rather than down needs the panel's whole width, so it drops the
   float and sits under the copy instead of beside it. :has lets the panel reorder itself without
   a second class on the wrapper. */
.cp-demo-mock.is-wide { float:none; width:100%; margin:var(--space-m) 0 0; }
.cp-demo:has(.cp-demo-mock.is-wide) { display:flex; flex-direction:column; }
.cp-demo:has(.cp-demo-mock.is-wide) .cp-demo-mock { order:3; }

.cp-demo-label { margin:0 0 var(--space-3xs) !important; font-size:var(--text-xs);
  font-weight:var(--weight-extrabold); letter-spacing:.11em; text-transform:uppercase; color:var(--color-primary); }
.cp-demo-help { margin:0 !important; font-size:var(--text-md); line-height:var(--line-relaxed);
  color:var(--color-ink-soft); }

@media (max-width:980px) {
.cp-row { grid-template-columns:1fr; gap:var(--space-l); }
.cp-req { border-left-width:2px; padding:var(--space-m) var(--space-l); }
}
@media (max-width:560px) {
.cp-demo { padding-top:0; }
.cp-demo-mock { float:none; width:100%; max-width:300px; margin:var(--space-m) auto 0; }
}

/* ---- Disclaimer ---- */
.cp-disclaimer { max-width:46em; margin:0 auto; text-align:center; }
.cp-disclaimer h2 { color:var(--color-secondary); }
.cp-disclaimer p { font-size:var(--text-md); line-height:var(--line-relaxed); color:var(--color-ink-soft); margin:var(--space-s) 0 var(--space-l); }
.cp-disclaimer .btn-row { justify-content:center; }

/* ---- Reveal timing: the tables are tall, so finish the fade as they enter (see about.css) ---- */
@supports (animation-timeline: view()) {
.reveal { animation-range: entry 0% entry 30%; }
.reveal.d1 { animation-range: entry 5% entry 35%; }
.reveal.d2 { animation-range: entry 10% entry 40%; }
}

@media (max-width:680px) {
.cp-hero { padding-top:122px; }
}

/* ---- Which item: chooser + family table ---- */
.cp-chooser { background:var(--color-secondary); color:#fff; border-radius:var(--radius-xl); padding:var(--space-xl); margin-bottom:var(--space-l); }
.cp-chooser-lead { margin:0 0 var(--space-m); font-size:var(--text-xs); font-weight:var(--weight-extrabold); letter-spacing:.12em; text-transform:uppercase; color:var(--brand-200); }
/* Five questions: who → condition → setting → role → duration. Labelled fields, not a sentence,
   so they can wrap to any column count without the reading order breaking. */
.cp-choices { display:grid; grid-template-columns:repeat(5,1fr); gap:var(--space-m); }
@media (max-width:1080px) { .cp-choices { grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px) { .cp-choices { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .cp-choices { grid-template-columns:1fr; } }
.cp-choices label { display:grid; gap:var(--space-2xs); font-size:var(--text-sm); color:rgba(255,255,255,.82); }
.cp-choices select { width:100%; padding:var(--space-xs) var(--space-s); border-radius:var(--radius-md, var(--radius-lg));
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.10); color:#fff; font:inherit; font-size:var(--text-md); }
.cp-choices select:disabled { opacity:.45; }
.cp-choices option { color:var(--color-ink); }
.cp-result { display:block; margin-top:var(--space-l); padding:var(--space-m) var(--space-l); border-radius:var(--radius-lg);
  background:rgba(255,255,255,.08); border:1px dashed rgba(255,255,255,.28); color:rgba(255,255,255,.7); font-size:var(--text-md); }
.cp-result.has-answer { background:#fff; border:none; color:var(--color-secondary); }
.cp-result.has-answer strong { font-size:var(--step-2); letter-spacing:-.02em; }
.cp-result.has-answer span { display:block; margin-top:var(--space-3xs); font-size:var(--text-sm); color:var(--color-ink-soft); }
.cp-result.has-answer a { color:var(--color-primary); font-weight:var(--weight-bold); }
.cp-chooser-fine { margin:var(--space-m) 0 0; font-size:var(--text-sm); color:rgba(255,255,255,.62); }

/* ---- "Complex? Conference.care makes it easy" ----
   Three things the platform does, an arrow, and the item that falls out of them. The arrow carries
   the causation, so it must always point FROM the ticks TO the outcome — across on wide screens,
   down once the row stacks. Headings only: no explanatory line under each tick (owner, 2026-09-11).
   The tick glyph is .cp-flow-tick, shared with the platform mockups on /medicare-compliance/ —
   reused rather than forked, so one tick shape exists on the site. Its grid-row is reset here
   because that rule is written for the two-line flow rows, and these are single-line. */
/* This section's lede is the claim the whole page builds to, so it is set larger than the standard
   --text-lg section description and in full-strength ink rather than ink-soft. */
#made-easy .section-head p { font-size:var(--text-xl); line-height:var(--line-snug);
  color:var(--color-secondary); max-width:20em; margin-inline:auto; }

.cp-easy { max-width:60em; margin:0 auto; }
.cp-easy-flow { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,0.9fr);
  align-items:center; gap:var(--space-l); }

.cp-easy-list { list-style:none; display:grid; gap:var(--space-s); margin:0; padding:0; }
.cp-easy-list li { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center;
  gap:var(--space-s); padding:var(--space-m) var(--space-l); border-radius:var(--radius-lg);
  background:var(--color-surface); border:1px solid var(--color-border-soft);
  box-shadow:var(--shadow-xs); }
.cp-easy-list b { font-size:var(--text-md); line-height:var(--line-snug); color:var(--color-secondary);
  font-weight:var(--weight-bold); }
.cp-easy-list .cp-flow-tick { grid-row:auto; margin-right:0; }

.cp-easy-arrow svg { display:block; width:34px; height:16px; stroke:var(--color-border);
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; fill:none; }

/* The outcome. Solid where the ticks are outlined, because it is the answer, not another step. */
.cp-easy-out { margin:0 !important; padding:var(--space-l) var(--space-xl);
  border-radius:var(--radius-xl); background:var(--color-secondary); color:var(--color-surface);
  font-size:var(--text-lg); line-height:var(--line-snug); font-weight:var(--weight-bold);
  box-shadow:var(--shadow-md); }

@media (max-width:760px) {
  .cp-easy-flow { grid-template-columns:1fr; gap:var(--space-m); justify-items:stretch; }
  /* Turn the arrow with the stack, or it points off the side of the page saying nothing. */
  .cp-easy-arrow { justify-self:center; transform:rotate(90deg); }
  .cp-easy-out { font-size:var(--text-md); padding:var(--space-m) var(--space-l); text-align:center; }
}

/* ---- SMS mockup: an illustration of the consent message, not a screenshot ---- */
.cp-phone { max-width:300px; padding:var(--space-s); border-radius:22px;
  background:var(--color-secondary); box-shadow:var(--shadow-md); }
.cp-phone-bar { display:flex; justify-content:center; margin-bottom:var(--space-s); }
.cp-phone-bar span { width:64px; height:5px; border-radius:3px; background:rgba(255,255,255,.28); }
.cp-bubble { background:#fff; border-radius:16px 16px 16px 4px; padding:var(--space-s); }
.cp-bubble p { margin:0 0 var(--space-2xs) !important; font-size:var(--text-sm) !important; line-height:var(--line-normal); color:var(--color-ink) !important; }
.cp-bubble p:last-child { margin-bottom:0 !important; }
.cp-bubble strong { color:var(--color-secondary); }
.cp-link { color:var(--color-primary); font-weight:var(--weight-bold); }
.cp-bubble-out { margin-top:var(--space-2xs); margin-left:auto; width:max-content; border-radius:16px 16px 4px 16px; background:var(--color-primary); }
.cp-bubble-out p { color:#fff !important; font-weight:var(--weight-bold); }
/* A stamp on the thread: what the platform does with the record once the patient has tapped.
   Sits inside the phone, quieter than the bubbles, so it reads as a status rather than a message. */
.cp-phone-stamp { display:flex; align-items:center; justify-content:center; gap:var(--space-3xs);
  width:max-content; max-width:100%; margin:var(--space-s) auto 0 !important;
  padding:var(--space-3xs) var(--space-s); border-radius:var(--radius-full);
  background:rgba(255,255,255,.12); font-size:var(--text-xs) !important;
  font-weight:var(--weight-bold); color:rgba(255,255,255,.86) !important; }
.cp-phone-stamp .cp-flow-tick { width:16px; height:16px; margin:0; background:rgba(255,255,255,.2); }
.cp-phone-stamp .cp-flow-tick svg { width:9px; height:9px; stroke:#fff; }

.cp-phone-cap { margin:var(--space-s) 0 0 !important; font-size:var(--text-xs) !important; color:rgba(255,255,255,.68) !important; text-align:center; }

/* ---- Explainer: the message the patient actually receives ----
   The patient never sees a "platform"; they see a text arrive. So the drawing is a notification on
   a phone rather than a status panel — the same shell as the consent phone, with the message shown
   as it lands rather than as a sent bubble. The link in it opens /patients/your-care/. */
.cp-phone-sms { max-width:300px; }
.cp-notif { background:var(--color-surface); border-radius:16px; padding:var(--space-s); box-shadow:var(--shadow-md); }
.cp-notif-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2xs);
  margin-bottom:var(--space-2xs); }
.cp-notif-app { display:inline-flex; align-items:center; gap:4px; font-size:9px; font-weight:var(--weight-extrabold);
  letter-spacing:.11em; text-transform:uppercase; color:var(--color-ink-soft); }
.cp-notif-app svg { width:12px; height:12px; fill:var(--color-primary); }
.cp-notif-time { font-size:9px; color:var(--color-ink-soft); }
.cp-notif p { margin:0 0 var(--space-2xs) !important; font-size:var(--text-sm) !important;
  line-height:var(--line-normal); color:var(--color-ink) !important; }
.cp-notif p:last-child { margin-bottom:0 !important; }
.cp-notif-from { font-weight:var(--weight-extrabold); color:var(--color-secondary) !important; }

/* ---- ask: the consent question, with both answers offered ----
   Neither answer is styled as taken. Yes carries the brand only because it is the affirmative
   option, not because it is the expected one. */
.cp-ask-sub { font-size:var(--text-xs) !important; color:var(--color-ink-soft) !important; }
.cp-ask-answers { display:flex; gap:var(--space-2xs); margin-top:var(--space-s); }
.cp-ask-yes, .cp-ask-no { flex:1; text-align:center; padding:var(--space-2xs) var(--space-xs);
  border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:var(--weight-bold); }
.cp-ask-yes { background:var(--color-primary); color:var(--color-surface); }
.cp-ask-no { border:1px solid var(--color-border); color:var(--color-ink-soft); }

/* ---- record: the answer, the arrow, the record it lands on ----
   The panel is the ordinary cp-ui; this is only the chip and the join, so a record still looks like
   every other platform panel on the page. */
.cp-flow { display:grid; gap:var(--space-3xs); }
.cp-flow-answer { justify-self:start; display:grid; grid-template-columns:auto 1fr; align-items:center;
  gap:0 var(--space-3xs); padding:var(--space-xs) var(--space-s); border-radius:var(--radius-lg);
  background:var(--color-surface); border:1px solid rgba(30,122,77,.28); box-shadow:var(--shadow-xs); }
.cp-flow-tick { grid-row:1 / span 2; display:grid; place-items:center; width:20px; height:20px;
  margin-right:var(--space-2xs); border-radius:var(--radius-full); background:oklch(from var(--success-dark) l c h / 12%); }
.cp-flow-tick svg { width:11px; height:11px; stroke:var(--success-dark); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.cp-flow-answer b { font-size:var(--text-sm); color:var(--color-secondary); }
.cp-flow-answer i { grid-column:2; font-style:normal; font-size:var(--text-xs); color:var(--color-ink-soft); }
/* The same box standing alone, with the tag beside the name. Bigger than it is inside a flow,
   because here it is the whole drawing rather than the first step of one. */
.cp-flow-solo { justify-self:center; padding:var(--space-s) var(--space-m); }
.cp-flow-solo b { display:flex; align-items:center; gap:var(--space-xs); font-size:var(--text-md); }
.cp-flow-solo .cp-ui-tag { grid-column:auto; grid-row:auto; font-style:normal; }
.cp-flow-solo i { margin-top:2px; font-size:var(--text-sm); }

.cp-flow-arrow { padding-left:var(--space-l); }
.cp-flow-arrow svg { display:block; width:14px; height:30px; stroke:var(--color-border); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; fill:none; }

/* ---- invite: the optional patient and carer ----
   A checklist inside the standard panel. The ticked row is the only one that carries colour, so
   the drawing reads as "one of these was chosen", not "both happen". */
.cp-checks { list-style:none; margin:0; padding:0; }
.cp-checks li { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:0 var(--space-s);
  padding:var(--space-xs) var(--space-s); border-top:1px solid var(--color-border-soft); }
.cp-checks li:first-child { border-top:none; }
.cp-check { grid-row:1 / span 2; display:grid; place-items:center; width:20px; height:20px;
  border-radius:6px; background:var(--color-surface); border:1.5px solid var(--color-border); }
.cp-check svg { width:11px; height:11px; stroke:#fff; stroke-width:2.4; stroke-linecap:round;
  stroke-linejoin:round; opacity:0; }
.cp-checks li.is-on .cp-check { background:var(--success-dark); border-color:var(--success-dark); }
.cp-checks li.is-on .cp-check svg { opacity:1; }
.cp-checks b { font-size:var(--text-sm); color:var(--color-secondary); }
.cp-checks i { grid-column:2; font-style:normal; font-size:var(--text-xs); color:var(--color-ink-soft); }

/* ---- emr: the document exported into the practice's own software ----
   Two symbols and an arrow, centred in the column: a document going into the practice's software.
   No card, no file name, no window — the sentence beside it already says what it is, and the
   chrome only made a simple idea look like a screenshot. */
.cp-emr { display:flex; align-items:center; justify-content:center; gap:var(--space-s);
  padding:var(--space-2xs) 0; }
.cp-emr-doc-ic { display:grid; place-items:center; width:54px; height:54px; flex:0 0 54px;
  border-radius:var(--radius-xl); background:var(--brand-25); }
.cp-emr-doc-ic svg { width:26px; height:33px; }
.cp-emr-page { fill:var(--color-surface); stroke:var(--color-primary); stroke-width:2; stroke-linejoin:round; }
.cp-emr-fold { fill:none; stroke:var(--color-primary); stroke-width:2; stroke-linejoin:round; }
.cp-emr-rule { stroke:var(--color-primary); stroke-width:2; stroke-linecap:round; opacity:.42; }
.cp-emr-arrow { width:40px; height:16px; flex:0 0 40px; stroke:var(--color-border);
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.cp-emr-target { display:grid; place-items:center; font-size:var(--text-sm);
  font-weight:var(--weight-bold); color:var(--color-secondary); }
/* The wordmark file has a white background (it is a JPEG). multiply drops that white into
   whatever the panel behind it is, so the logo sits on the page rather than in a white box —
   without touching the file, which is a third-party asset we keep unaltered. */
.cp-emr-target img { display:block; width:auto; max-width:130px; max-height:40px;
  mix-blend-mode:multiply; }

/* ---- session: the note written beside the conference ----
   Two panes in one window: the call on the left, the shared document on the right. The point of the
   drawing is the adjacency — never stack these, or it stops saying "at the same time". */
.cp-session { border-radius:var(--radius-lg); overflow:hidden; background:var(--color-secondary);
  box-shadow:var(--shadow-md); }
.cp-session-bar { display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-2xs) var(--space-s); }
.cp-session-live { display:inline-flex; align-items:center; gap:5px; font-size:9px;
  font-weight:var(--weight-extrabold); letter-spacing:.1em; text-transform:uppercase; color:#fff; }
.cp-session-live i { width:6px; height:6px; border-radius:var(--radius-full); background:#3fbf7f; }
.cp-session-time { font-size:9px; color:rgba(255,255,255,.62); font-variant-numeric:tabular-nums; }
.cp-session-body { display:grid; grid-template-columns:86px minmax(0,1fr); gap:1px;
  padding:0 var(--space-2xs) var(--space-2xs); }
.cp-session-tiles { display:grid; grid-template-columns:1fr 1fr; gap:3px; align-content:start; }
.cp-session-tile { display:grid; justify-items:center; gap:1px; padding:var(--space-3xs) 1px;
  border-radius:6px; background:rgba(255,255,255,.08); }
.cp-session-tile i { display:grid; place-items:center; width:20px; height:20px; border-radius:var(--radius-full);
  background:var(--color-primary); font-style:normal; font-size:8px; font-weight:var(--weight-extrabold); color:#fff; }
.cp-session-tile em { font-style:normal; font-size:7px; color:rgba(255,255,255,.72); text-align:center;
  line-height:1.2; overflow:hidden; }
.cp-session-note { margin-left:var(--space-2xs); padding:var(--space-xs); border-radius:8px;
  background:var(--color-surface); }
.cp-session-note-h { margin:0 0 var(--space-3xs) !important; font-size:8px !important;
  font-weight:var(--weight-extrabold); letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-ink-soft) !important; }
.cp-session-note p { margin:0 0 3px !important; font-size:9px !important; line-height:1.35;
  color:var(--color-ink) !important; }
.cp-session-note p:last-child { margin-bottom:0 !important; }
.cp-session-note b { color:var(--color-primary); }

/* ---- summary: the patient's copy ----
   Paper, not panel. It is the same conference as the clinical note and must not look like it. */
.cp-summary { border-radius:var(--radius-lg); overflow:hidden; background:var(--color-surface);
  border:1px solid var(--color-border-soft); box-shadow:var(--shadow-md); }
.cp-summary-head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-s);
  padding:var(--space-s) var(--space-m); border-bottom:2px solid var(--brand-25); }
.cp-summary-head b { font-size:var(--text-sm); color:var(--color-secondary); }
.cp-summary-head i { font-style:normal; font-size:10px; color:var(--color-ink-soft); }
.cp-summary-body { padding:var(--space-m); }
.cp-summary-lede { margin:0 0 var(--space-s) !important; font-size:var(--text-sm) !important;
  line-height:var(--line-normal); color:var(--color-ink) !important; }
.cp-summary-line { margin:0 0 var(--space-s) !important; }
.cp-summary-line:last-child { margin-bottom:0 !important; }
.cp-summary-line b { display:block; font-size:10px; font-weight:var(--weight-extrabold); letter-spacing:.09em;
  text-transform:uppercase; color:var(--color-primary); }
.cp-summary-line span { display:block; margin-top:2px; font-size:var(--text-xs); line-height:var(--line-normal);
  color:var(--color-ink); }

/* ---- Pointer card (compliance page → item numbers page) ---- */
.cp-pointer { max-width:46em; margin:0 auto; text-align:center; }
.cp-pointer h2 { color:var(--color-secondary); }
.cp-pointer p { font-size:var(--text-md); line-height:var(--line-relaxed); color:var(--color-ink-soft); margin:var(--space-s) 0 var(--space-l); }
.cp-pointer .btn-row { justify-content:center; }

/* ============================================================
   Cross-reference grid — all three dimensions at once.
   Clinician down the side · patient type across in four groups · organise / participate as the
   two columns inside each group. 6 × 4 × 2 = 48 intersections, every one a cell you can point at.
   ⚠️ Replaced a drag-to-spin 3D scatter (2026-09-11): it looked busy but nothing tied a floating
   number back to its three axes, so you could not tell what any node intersected. If 3D is ever
   revisited it needs drop-lines to a floor grid or it fails the same way.
   Hue per patient type is derived from --tone rather than a lookup, so adding a fifth patient type
   needs no new colour — but check the contrast if you do.
   ============================================================ */
.cp-xm-wrap { border-radius:var(--radius-xl); border:1px solid var(--color-border-soft);
  background:#fff; box-shadow:var(--shadow-xs); -webkit-overflow-scrolling:touch; }
/* Column count comes from the data (style="--planes:N" on .cp-xmatrix), so adding a conference
   kind needs no CSS change.
   ⚠️ STATIC BY DESIGN — no min-width, so the grid always fits the 1180px wrap and never scrolls
   sideways. That is why the plane count is kept to five (see tools/build-mbs-items.py): each one
   added steals ~90px from every cell, and past six the item numbers start wrapping to three lines.
   Below 820px it does fall back to scrolling — eleven columns cannot fit a phone, and squashing
   them destroys the cross-reference that is the only reason the grid exists. */
.cp-xmatrix { --planes:5; width:100%; }
.cp-xm-head, .cp-xm-row { display:grid; grid-template-columns:190px repeat(var(--planes), 1fr); align-items:stretch; }
.cp-xm-head { position:sticky; top:0; z-index:3; background:var(--color-secondary); color:#fff; }
.cp-xm-corner { display:flex; align-items:flex-end; padding:var(--space-s) var(--space-m);
  font-size:var(--text-xs); font-weight:var(--weight-extrabold); letter-spacing:.1em; text-transform:uppercase;
  position:sticky; left:0; z-index:2; background:var(--color-secondary); }
.cp-xm-group { --tone-c:hsl(calc(206 + var(--tone) * 40) 62% 62%);
  display:grid; gap:var(--space-2xs); padding:var(--space-s) var(--space-xs) 0;
  border-left:1px solid rgba(255,255,255,.16); text-align:center; }
.cp-xm-group b { font-size:var(--text-xs); font-weight:var(--weight-extrabold); color:var(--tone-c);
  line-height:var(--line-tight); }
.cp-xm-roles { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3xs); }
.cp-xm-roles i { font-style:normal; font-size:10px; font-weight:var(--weight-bold); letter-spacing:.06em;
  text-transform:uppercase; color:rgba(255,255,255,.66); padding-bottom:var(--space-2xs); }

.cp-xm-row { border-top:1px solid var(--color-border-soft); }
.cp-xm-row:nth-child(even) { background:var(--brand-25); }
.cp-xm-who { position:sticky; left:0; z-index:2; display:flex; align-items:center;
  padding:var(--space-s) var(--space-m); font-size:var(--text-xs); line-height:var(--line-snug);
  font-weight:var(--weight-bold);
  color:var(--color-secondary); background:inherit; border-right:1px solid var(--color-border-soft); }
.cp-xm-cellgroup { --tone-c:hsl(calc(206 + var(--tone) * 40) 55% 46%);
  display:grid; grid-template-columns:1fr 1fr; gap:1px; border-left:1px solid var(--color-border-soft); }
/* Numbers STACK. Flowing them inline meant a short family (735 739 743) spread across the cell
   while a long one (10955 10957 10959) wrapped to a column — two shapes for the same thing. A
   column reads the same at every number length, and the order down it is the duration order. */
.cp-xm-cell { display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; padding:var(--space-s) var(--space-3xs); text-align:center; line-height:1.3; }
/* Each item number is its own target. A run of "735 739 743" says nothing about which one you
   claim — the duration band IS the difference between them, and it moves between families, so it
   rides on the number and shows on hover, tap or keyboard focus rather than sitting in a legend. */
.cp-xm-cell b { position:relative; display:inline-block; padding:2px 5px; border-radius:var(--radius-sm);
  font-size:var(--text-xs); font-weight:var(--weight-extrabold); color:var(--tone-c);
  font-variant-numeric:tabular-nums; cursor:help; outline:none;
  transition:background .12s ease, color .12s ease; }
.cp-xm-cell b:hover, .cp-xm-cell b:focus-visible { background:var(--tone-c); color:var(--color-surface); }
/* The band and the rebate, held in an <i> so they are read out by a screen reader and survive with
   no CSS, rather than living in a ::after on an attribute where neither is true. Two stacked lines:
   how long the conference ran, then what that item pays — the two facts that separate one item in a
   family from the next. */
.cp-xm-cell b i { position:absolute; left:calc(100% + 6px); top:50%; z-index:6;
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  transform:translateY(-50%) translateX(-3px); opacity:0; pointer-events:none;
  padding:4px var(--space-2xs); border-radius:var(--radius-sm);
  background:var(--color-secondary); color:var(--color-surface);
  font-size:10px; font-style:normal; font-weight:var(--weight-bold); white-space:nowrap;
  text-align:left; line-height:1.25;
  box-shadow:var(--shadow-sm); transition:opacity .12s ease, transform .12s ease; }
/* The money is the bigger of the two — it is what the reader came for — and the tier sits beside it
   so the figure can never be mistaken for the schedule fee. */
.cp-xm-fee { display:flex; align-items:baseline; gap:4px;
  font-size:var(--text-xs); font-variant-numeric:tabular-nums; }
.cp-xm-tier { font-size:9px; font-weight:var(--weight-bold); letter-spacing:.04em;
  opacity:.7; }
.cp-xm-cell b:hover i, .cp-xm-cell b:focus-visible i { opacity:1; transform:translateY(-50%) translateX(0); }
/* The last plane has no room to its right, so its tooltips open to the left instead. */
.cp-xm-cellgroup:last-child .cp-xm-cell b i { left:auto; right:calc(100% + 6px);
  transform:translateY(-50%) translateX(3px); }
.cp-xm-cellgroup:last-child .cp-xm-cell b:hover i,
.cp-xm-cellgroup:last-child .cp-xm-cell b:focus-visible i { transform:translateY(-50%) translateX(0); }
/* A run of item numbers in one cell is the duration bands, so they read as a list not a total. */

.cp-xm-cell.is-unver { background:rgba(204,63,30,.06); }
.cp-xm-cell.is-none { background:repeating-linear-gradient(135deg, transparent, transparent 6px, rgba(13,38,56,.035) 6px, rgba(13,38,56,.035) 12px); }
.cp-xm-dash { color:var(--color-border); }
/* Point at any cell and its whole row and column light up — that is the intersection, made obvious. */
.cp-xm-cell:hover { outline:2px solid var(--tone-c); outline-offset:-2px; background:#fff; }


@media (max-width:820px) {
  /* The grid keeps its width and scrolls sideways — squashing the columns onto a phone loses the
     cross-reference, which is the only reason the grid exists. The sticky clinician column keeps
     your place while you scroll. */
  .cp-xm-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .cp-xmatrix { min-width:calc(150px + var(--planes) * 190px); }
  .cp-xm-head, .cp-xm-row { grid-template-columns:150px repeat(var(--planes), 1fr); }
  .cp-xm-who { padding:var(--space-xs) var(--space-s); font-size:var(--text-xs); }
  .cp-xm-cell { padding:var(--space-xs) var(--space-3xs); }
}

/* ============================================================
   Mockups at the foot of each requirement card.
   ILLUSTRATIONS of the platform, not screenshots — see compliance.json's _mockupNote. They are
   aria-hidden, because the sentence above each one already says what they show; a screen reader
   should not have to parse a drawing.
   ============================================================ */
.cp-ui { border-radius:var(--radius-lg); border:1px solid var(--color-border-soft); background:#fff;
  box-shadow:0 18px 34px -26px rgba(13,38,56,.55); overflow:hidden; }
.cp-ui.is-warn { border-color:rgba(168,51,24,.28); }
.cp-ui.is-ok { border-color:rgba(30,122,77,.24); }
.cp-ui-bar { display:flex; align-items:center; justify-content:space-between; gap:var(--space-s);
  padding:var(--space-2xs) var(--space-s); background:var(--color-secondary); color:#fff;
  font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:.04em; }
.cp-ui-pill { padding:2px 8px; border-radius:var(--radius-full); background:rgba(255,255,255,.18);
  font-size:10px; font-weight:var(--weight-extrabold); letter-spacing:.06em; text-transform:uppercase; }
.cp-ui-pill.is-ok { background:var(--success-dark); }
.cp-ui-pill.is-live { background:var(--color-primary); }
.cp-ui-pill.is-warn { background:var(--danger-dark); }

.cp-ui-list { list-style:none; margin:0; padding:0; }
.cp-ui-list li { display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px var(--space-s);
  padding:var(--space-2xs) var(--space-s); border-top:1px solid var(--color-border-soft); }
.cp-ui-list li:first-child { border-top:none; }
.cp-ui-list b { grid-column:1; font-size:var(--text-sm); color:var(--color-secondary); }
.cp-ui-list span { grid-column:1; font-size:var(--text-xs); color:var(--color-ink-soft); }
.cp-ui-tag { grid-column:2; grid-row:1 / span 2; font-style:normal; white-space:nowrap;
  padding:2px 8px; border-radius:var(--radius-full); background:var(--brand-50);
  font-size:10px; font-weight:var(--weight-bold); color:var(--color-primary); }
/* One line per person: the sub-label becomes a quiet chip beside the name rather than a second
   row, which halves the height of a list of any length. */
.cp-ui-list.is-inline li { display:flex; align-items:center; gap:var(--space-2xs);
  padding-inline:var(--space-xs); }
.cp-ui-list.is-inline b { flex:1 1 auto; white-space:nowrap; }
.cp-ui-list.is-inline span { flex:0 1 auto; white-space:nowrap; padding:2px 6px; border-radius:var(--radius-full);
  background:var(--color-surface-sunk, rgba(13,38,56,.05)); font-size:10px;
  font-weight:var(--weight-medium); color:var(--color-ink-soft); }
.cp-ui-list.is-inline .cp-ui-tag { grid-column:auto; grid-row:auto; }

.cp-ui-tag.is-doc { background:rgba(13,38,56,.07); color:var(--color-ink-soft); }
.cp-ui-tag.is-yes { background:oklch(from var(--success-dark) l c h / 12%); color:var(--success-dark); }
.cp-ui-tag.is-no { background:oklch(from var(--danger-dark) l c h / 10%); color:var(--danger-dark); }

.cp-ui-times { display:flex; align-items:center; gap:var(--space-xs); padding:var(--space-s);
  border-bottom:1px solid var(--color-border-soft); font-size:var(--text-xs); color:var(--color-ink-soft); }
.cp-ui-times b { font-size:var(--text-lg); color:var(--color-secondary); letter-spacing:-.01em; }
.cp-ui-arrow { color:var(--color-border); }
.cp-ui-dur { margin-left:auto; padding:2px 8px; border-radius:var(--radius-full);
  background:var(--brand-50); font-weight:var(--weight-extrabold); color:var(--color-primary); }

.cp-ui-note { padding:var(--space-s); }
.cp-ui-note p { margin:0 0 var(--space-2xs) !important; font-size:var(--text-xs) !important;
  line-height:var(--line-normal); color:var(--color-ink) !important; }
.cp-ui-note p:last-child { margin-bottom:0 !important; }
.cp-ui-note b { color:var(--color-primary); }
/* A caret that blinks, so it reads as being written now rather than filed afterwards. */
.cp-ui-caret { display:inline-block; width:2px; height:1em; margin-left:2px; vertical-align:-2px;
  background:var(--color-primary); animation:cp-blink 1.1s steps(1) infinite; }
@keyframes cp-blink { 50% { opacity:0; } }
@media (prefers-reduced-motion: reduce) {
.cp-ui-caret { animation:none; }
}

.cp-ui-item { display:flex; align-items:center; gap:var(--space-s); padding:var(--space-s);
  border-bottom:1px solid var(--color-border-soft); }
.cp-ui-item-no { flex:none; padding:var(--space-2xs) var(--space-s); border-radius:var(--radius-lg);
  background:var(--grad-chip); color:#fff; font-size:var(--text-lg); font-weight:var(--weight-extrabold); letter-spacing:-.01em; }
.cp-ui-item b { display:block; font-size:var(--text-sm); color:var(--color-secondary); }
.cp-ui-item i { font-style:normal; font-size:var(--text-xs); color:var(--color-ink-soft); }

.cp-ui-q { margin:0 !important; padding:var(--space-s) var(--space-s) var(--space-2xs);
  font-size:var(--text-sm) !important; font-weight:var(--weight-bold); color:var(--color-secondary) !important; }
.cp-ui-choice { display:flex; gap:var(--space-2xs); padding:0 var(--space-s) var(--space-s); }
.cp-ui-choice span { flex:1; text-align:center; padding:var(--space-2xs); border-radius:var(--radius-lg);
  border:1px solid var(--color-border); font-size:var(--text-xs); color:var(--color-ink-soft); }
.cp-ui-choice .is-picked { background:var(--color-primary); border-color:var(--color-primary); color:#fff; font-weight:var(--weight-bold); }

.cp-ui-timeline li { grid-template-columns:1fr; }
.cp-ui-foot { margin:0 !important; padding:var(--space-2xs) var(--space-s) var(--space-s);
  font-size:var(--text-xs) !important; color:var(--color-ink-soft) !important; }

/* ---- Compliance advisory service: the lead-in band ---- */
.ad-band { position:relative; overflow:hidden; background:var(--grad-deep); color:#fff; }
.ad-inner { position:relative; z-index:1; max-width:52em; margin:0 auto; text-align:center; }
.ad-band h2 { color:#fff; max-width:18em; margin:0 auto var(--space-s); }
.ad-band .eyebrow.on-dark { color:var(--brand-200); }
.ad-lede { font-size:var(--text-lg); line-height:var(--line-relaxed); color:rgba(255,255,255,.9); margin:0 auto var(--space-xl); max-width:44em; }
.ad-list { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-m); margin:0 0 var(--space-xl); padding:0; text-align:left; }
.ad-list li { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-lg); padding:var(--space-m); }
.ad-list b { display:block; color:#fff; font-size:var(--text-md); margin-bottom:var(--space-3xs); }
.ad-list span { font-size:var(--text-sm); color:rgba(255,255,255,.8); line-height:var(--line-normal); }
.ad-band .btn-row { justify-content:center; }
.ad-fine { margin:var(--space-l) auto 0; max-width:44em; font-size:var(--text-sm); color:rgba(255,255,255,.62); line-height:var(--line-relaxed); }
@media (max-width:920px) {
.ad-list { grid-template-columns:1fr; }
}