/* =========================================================
   Clinic Management — Healthcare Suite
   Built to public/reference/brand-guidelines.md. Loaded after /index.css.

   Sister page to Hospital Management and Multi-Location Management,
   sharing their component vocabulary — the product surface, field rows,
   tags, role rows and the systems stack — and adding what only this
   page needs: the nine-stage patient journey, the front-desk workspace,
   the phone screens and the follow-up track.

   THE SIGNATURE IS THE JOURNEY. Enquire, book, prepare, visit, report,
   educate, follow up, review, return. It is drawn once in full near the
   top (.cl-journey), then the page walks through it a stage at a time,
   and .cl-recap closes by telling the whole thing back as one story.

   The brief's green (#16C542) is not in our palette: --lime fills the
   active stage, the confirmations and the engagement layer; --lime-ink
   carries any green text, since --lime on white is 1.28:1. White
   dominates and no section is green all over.

   Every class is prefixed cl- ; the reset weighs nothing (guidelines §14).
   ========================================================= */

.cl {
  --pad: calc(67 * var(--u));
  --text: #2a2a2a;
  --faint: #9a9a9a;
  --soft: #f5f8f1;
  --grey: #f7f7f7;
  --lime-tint: #effcb5;
  --lime-ink: #3f5a00;
  --amber: #fff1d2;
  --amber-ink: #8a5600;
  --r-card: calc(18 * var(--u));
  --r: calc(12 * var(--u));
  --r-sm: calc(9 * var(--u));
  --shadow: 0 1px 2px rgba(17, 19, 24, .03), 0 calc(18 * var(--u)) calc(40 * var(--u)) calc(-28 * var(--u)) rgba(17, 19, 24, .16);
  --ease: cubic-bezier(.2, .8, .2, 1);
  display: block;
  color: var(--ink);
}
.cl *, .cl *::before, .cl *::after { box-sizing: border-box; }
:where(.cl) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, dt, figure, blockquote) { margin: 0; }
:where(.cl) :where(ul, ol) { padding: 0; list-style: none; }
.cl img { display: block; max-width: 100%; }
.cl .i { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- type ---------- */
.cl-h1, .cl-h2, .cl-h3 { font-family: var(--font-head); font-weight: 500; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.cl-h1 { font-size: calc(64 * var(--u)); line-height: calc(72 * var(--u)); letter-spacing: -.035em; }
.cl-h2 { font-size: calc(48 * var(--u)); line-height: calc(57 * var(--u)); }
.cl-h3 { font-size: calc(24 * var(--u)); line-height: calc(30 * var(--u)); }
.cl .dim { color: var(--muted); }
.cl-lede { margin-top: calc(18 * var(--u)); max-width: calc(660 * var(--u)); font-size: calc(25 * var(--u)); line-height: calc(33 * var(--u)); letter-spacing: -.01em; color: var(--muted); text-wrap: pretty; }
.cl-sub { margin-top: calc(18 * var(--u)); max-width: calc(560 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(30 * var(--u)); letter-spacing: -.01em; color: var(--muted); text-wrap: pretty; }
.cl-sub b { font-weight: 600; color: var(--ink); }
.cl-sub a, .cl-faq a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--lime-ico); }
.cl-sub a:hover, .cl-faq a:hover { background: var(--lime-soft); }
.cl-k { font-size: calc(12 * var(--u)); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.cl-k .i { width: calc(13 * var(--u)); height: calc(13 * var(--u)); vertical-align: -.15em; margin-right: calc(5 * var(--u)); }

.cl-pill { display: inline-flex; align-items: center; gap: calc(7 * var(--u)); padding: calc(5 * var(--u)) calc(13 * var(--u)); border-radius: 999px; background: var(--soft); color: var(--text); font-size: calc(13 * var(--u)); font-weight: 600; line-height: 1.3; }
.cl-pill::before { content: ""; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: var(--lime-ico); }
.cl-pill + .cl-h1 { margin-top: calc(22 * var(--u)); }
.cl-k + .cl-h2 { margin-top: calc(14 * var(--u)); }

.cl-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: calc(14 * var(--u)); margin-top: calc(40 * var(--u)); }
.cl .btn .i { width: calc(22 * var(--u)); height: calc(22 * var(--u)); transition: transform .2s var(--ease); }
.cl .btn:hover .i { transform: translateX(calc(3 * var(--u))); }

/* a claim the page has to make in its own voice, not inside a box */
.cl-statement { margin-top: calc(34 * var(--u)); max-width: calc(620 * var(--u)); font-family: var(--font-head); font-size: calc(26 * var(--u)); line-height: calc(34 * var(--u)); font-weight: 500; letter-spacing: -.025em; color: var(--muted); }
.cl-statement b { font-weight: 500; color: var(--ink); }
.cl-statement.mid { margin: calc(56 * var(--u)) auto 0; max-width: calc(820 * var(--u)); text-align: center; }
.cl-quote { margin-top: calc(40 * var(--u)); font-family: var(--font-head); font-size: calc(34 * var(--u)); line-height: calc(44 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.cl-quote.mid { text-align: center; }
.cl-note-sm { margin-top: calc(22 * var(--u)); font-size: calc(13.5 * var(--u)); color: var(--faint); }

/* ---------- sections ---------- */
.cl-sec { position: relative; padding: calc(128 * var(--u)) var(--pad); }
.cl-sec + .cl-sec { border-top: 1px solid var(--rule); }
.cl-head { max-width: calc(940 * var(--u)); }
.cl-head.mid { margin-inline: auto; text-align: center; }
.cl-head.mid .cl-lede { margin-inline: auto; }
.cl-sub.mid { margin-inline: auto; max-width: calc(760 * var(--u)); text-align: center; }
.cl-stage { margin-top: calc(72 * var(--u)); }
.cl-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(88 * var(--u)); align-items: center; }
.cl-split.wide { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }   /* the brief's 60/40 */
.cl-split > .cl-stage:only-child, .cl-split > div > .cl-stage { margin-top: 0; }

/* a full-bleed soft band that still shows the frame rules */
.cl-sec.soft { isolation: isolate; }
.cl-sec.soft::before { content: ""; position: absolute; inset: 0 auto 0 50%; width: 100vw; transform: translateX(-50%); background: #fafaf8; z-index: -1; }
.cl-sec.soft::after { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; right: -1px; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); pointer-events: none; }

/* ---------- hero ---------- */
.cl-hero { padding: calc(112 * var(--u)) var(--pad) calc(104 * var(--u)); }
.cl-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) calc(600 * var(--u)); column-gap: calc(52 * var(--u)); align-items: center; }
.cl-hero__text { min-width: 0; }
.cl-hero .cl-sub { max-width: calc(600 * var(--u)); }
.cl-alongside { display: flex; align-items: flex-start; gap: calc(10 * var(--u)); margin-top: calc(40 * var(--u)); padding-top: calc(24 * var(--u)); border-top: 1px solid var(--rule); max-width: calc(620 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(24 * var(--u)); color: var(--muted); }
.cl-alongside .i { margin-top: calc(4 * var(--u)); color: var(--lime-ink); }

.cl-hero__art { position: relative; }
.cl-hero__art img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 42%; border-radius: var(--r-card); }

/* the floating notices: small, legible, and never over a face */
.cl-note { position: absolute; display: grid; gap: calc(3 * var(--u)); padding: calc(11 * var(--u)) calc(15 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; box-shadow: var(--shadow); }
.cl-note b { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(13.5 * var(--u)); font-weight: 600; letter-spacing: -.01em; }
.cl-note span { font-size: calc(13 * var(--u)); line-height: calc(19 * var(--u)); color: var(--muted); }
.cl-note .i { width: calc(13 * var(--u)); height: calc(13 * var(--u)); stroke-width: 2.4; }
.cl-note.ok b { color: var(--lime-ink); }
.cl-note.ok { border-color: var(--lime-ico); }
.cl-note.a { top: calc(-26 * var(--u)); left: calc(-34 * var(--u)); max-width: calc(230 * var(--u)); }
.cl-note.b { top: 44%; right: calc(-40 * var(--u)); }
.cl-note.c { bottom: calc(-28 * var(--u)); left: calc(26 * var(--u)); }
.cl-note.d { top: calc(34 * var(--u)); right: calc(-46 * var(--u)); max-width: calc(250 * var(--u)); }
.cl-note.e { bottom: calc(40 * var(--u)); left: calc(-34 * var(--u)); }

/* =========================================================
   THE JOURNEY — nine stages, drawn once, in full
   ========================================================= */
.cl-journey { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: calc(76 * var(--u)); }
.cl-journey::before { content: ""; position: absolute; top: calc(6 * var(--u)); left: calc(100% / 18); right: calc(100% / 18); height: 2px; background: var(--divider); }
/* the lime fill runs the same span and grows once the rail is in view */
.cl-journey::after { content: ""; position: absolute; top: calc(6 * var(--u)); left: calc(100% / 18); width: 0; height: 2px; background: var(--lime-ico); transition: width 1.8s var(--ease); }
.cl-journey.is-in::after { width: calc(100% - 100% / 9); }
.cl-journey li { position: relative; display: grid; justify-items: center; gap: calc(16 * var(--u)); }
.cl-journey i { position: relative; z-index: 1; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; border: 2px solid var(--divider); background: #fff; transition: border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease); }
.cl-journey span { font-size: calc(15 * var(--u)); font-weight: 600; letter-spacing: -.01em; color: var(--faint); transition: color .4s var(--ease); }
.cl-journey.is-in i { border-color: var(--lime-ico); background: var(--lime); transition-delay: calc(var(--i) * 170ms); }
.cl-journey.is-in span { color: var(--ink); transition-delay: calc(var(--i) * 170ms); }
.cl-journey.is-in li:last-child i { box-shadow: 0 0 0 calc(5 * var(--u)) rgba(199, 243, 104, .38); }

/* =========================================================
   ENQUIRE — three channels converging on one patient
   ========================================================= */
.cl-chans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(12 * var(--u)); }
.cl-chan { display: grid; gap: calc(7 * var(--u)); padding: calc(15 * var(--u)) calc(17 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; font-size: calc(14 * var(--u)); font-weight: 600; }
.cl-chan .i { color: var(--lime-ink); }
.cl-chan em { font-style: normal; font-size: calc(13 * var(--u)); line-height: calc(19 * var(--u)); font-weight: 400; color: var(--muted); }

/* the three legs meeting one stem */
.cl-funnel { position: relative; height: calc(34 * var(--u)); margin: calc(6 * var(--u)) 0; }
.cl-funnel::before { content: ""; position: absolute; top: calc(14 * var(--u)); left: 16.6%; right: 16.6%; height: 2px; background: var(--divider); }
.cl-funnel i { position: absolute; top: 0; width: 2px; height: calc(15 * var(--u)); background: var(--divider); }
.cl-funnel i:nth-child(1) { left: 16.6%; }
.cl-funnel i:nth-child(2) { left: calc(50% - 1px); }
.cl-funnel i:nth-child(3) { right: 16.6%; }
.cl-funnel::after { content: ""; position: absolute; top: calc(14 * var(--u)); left: calc(50% - 1px); width: 2px; bottom: 0; background: var(--lime-ico); }

/* enquiry becomes appointment, in three moves */
.cl-steps { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); margin-top: calc(18 * var(--u)); }
.cl-steps li { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.cl-steps li + li::before { content: ""; width: calc(16 * var(--u)); height: 1px; background: var(--divider); }
.cl-steps span { display: inline-block; padding: calc(8 * var(--u)) calc(15 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: calc(14 * var(--u)); font-weight: 600; color: var(--muted); }
.cl-steps .on span { border-color: var(--lime-ico); background: var(--lime); color: var(--ink); }

/* =========================================================
   SHARED PRODUCT SURFACE
   ========================================================= */
.cl-ui { border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; overflow: hidden; box-shadow: var(--shadow); }
.cl-ui__top { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)); border-bottom: 1px solid var(--rule); background: #fcfcfb; }
.cl-ui__top b { font-size: calc(12.5 * var(--u)); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.cl-ui__top .cl-tag { margin-left: auto; }
.cl-ui__body { padding: calc(20 * var(--u)); }
.cl-ui + .cl-ui { margin-top: calc(16 * var(--u)); }

.cl-tag { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: 999px; background: var(--grey); color: var(--text); font-size: calc(12 * var(--u)); font-weight: 600; white-space: nowrap; }
.cl-tag.ok { background: var(--lime-tint); color: var(--lime-ink); }
.cl-tag.wait { background: var(--amber); color: var(--amber-ink); }
.cl-tag .i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }

.cl-fields { display: grid; gap: calc(15 * var(--u)); }
.cl-fields > div { display: grid; gap: calc(3 * var(--u)); }
.cl-fields dt { font-size: calc(11.5 * var(--u)); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.cl-fields dd { font-size: calc(17 * var(--u)); font-weight: 600; letter-spacing: -.01em; }
.cl-fields.two { grid-template-columns: 1fr 1fr; column-gap: calc(28 * var(--u)); }

.cl-bar { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(13 * var(--u)) calc(18 * var(--u)); border-bottom: 1px solid var(--rule); }
/* flex-basis 0, not auto: with auto the nowrap placeholder becomes the bar's
   min-content and the whole panel is 410px wide on a 390px phone */
.cl-search { display: flex; align-items: center; gap: calc(9 * var(--u)); flex: 1 1 0; min-width: 0; padding: calc(9 * var(--u)) calc(13 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-sm); color: var(--faint); font-size: calc(14 * var(--u)); overflow: hidden; }
.cl-search span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cl-av { display: grid; place-items: center; flex: none; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; background: var(--lime); font-size: calc(13 * var(--u)); font-weight: 700; letter-spacing: .02em; }
.cl-av.sm { width: calc(24 * var(--u)); height: calc(24 * var(--u)); font-size: calc(11 * var(--u)); }
.cl-who { display: flex; align-items: center; gap: calc(13 * var(--u)); }
.cl-who > div > b { display: block; font-size: calc(18 * var(--u)); font-weight: 600; letter-spacing: -.02em; }
/* > div > span, not `span`: a bare descendant selector is (0,1,1) and
   silently beats .cl-av (0,1,0), which turned the avatar back into a
   block and knocked its initials out of the circle */
.cl-who > div > span { display: block; margin-top: calc(2 * var(--u)); font-size: calc(13 * var(--u)); color: var(--muted); }

.cl-said { margin-top: calc(18 * var(--u)); padding: calc(15 * var(--u)) calc(18 * var(--u)); border-left: 2px solid var(--lime-ico); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--soft); font-size: calc(16.5 * var(--u)); line-height: calc(25 * var(--u)); font-weight: 500; }
.cl-said .cl-k { display: block; margin-bottom: calc(6 * var(--u)); }
.cl-next { display: flex; align-items: center; gap: calc(9 * var(--u)); margin-top: calc(18 * var(--u)); padding-top: calc(16 * var(--u)); border-top: 1px solid var(--rule); font-size: calc(15 * var(--u)); color: var(--muted); }
.cl-next b { font-weight: 600; color: var(--ink); }
.cl-next .i { color: var(--lime-ink); }

/* the front desk: record beside the patient's own timeline */
.cl-desk { display: grid; grid-template-columns: minmax(0, 1fr) calc(250 * var(--u)); }
.cl-desk__main { padding: calc(22 * var(--u)); min-width: 0; }
.cl-desk__side { padding: calc(22 * var(--u)); border-left: 1px solid var(--rule); background: #fcfcfb; }
.cl-time { margin-top: calc(16 * var(--u)); }
.cl-time li { position: relative; display: grid; grid-template-columns: calc(54 * var(--u)) minmax(0, 1fr); column-gap: calc(12 * var(--u)); padding: calc(9 * var(--u)) 0 calc(9 * var(--u)) calc(18 * var(--u)); }
.cl-time li::before { content: ""; position: absolute; left: 0; top: calc(15 * var(--u)); width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: var(--divider); }
.cl-time li::after { content: ""; position: absolute; left: calc(4 * var(--u)); top: calc(24 * var(--u)); bottom: calc(-3 * var(--u)); width: 1px; background: var(--rule); }
.cl-time li:last-child::after { display: none; }
.cl-time li.now::before { background: var(--lime-ico); box-shadow: 0 0 0 calc(4 * var(--u)) rgba(199, 243, 104, .35); }
.cl-time li.now p { color: var(--lime-ink); }
.cl-time time { font-size: calc(12.5 * var(--u)); font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.cl-time p { font-size: calc(14.5 * var(--u)); font-weight: 500; }

/* =========================================================
   AUTOMATION
   ========================================================= */
.cl-asks { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); margin-top: calc(34 * var(--u)); max-width: calc(940 * var(--u)); }
.cl-asks li { padding: calc(9 * var(--u)) calc(16 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: calc(15 * var(--u)); color: var(--muted); }

.cl-thread { display: grid; gap: calc(12 * var(--u)); }
.cl-msg { padding: calc(14 * var(--u)) calc(17 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; font-size: calc(16 * var(--u)); line-height: calc(25 * var(--u)); }
.cl-msg .cl-k { display: flex; align-items: center; gap: calc(6 * var(--u)); margin-bottom: calc(6 * var(--u)); }
.cl-msg b { display: flex; align-items: center; gap: calc(7 * var(--u)); margin-bottom: calc(5 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 600; }
.cl-msg.out { background: var(--lime-soft); border-color: var(--lime-ico); }
.cl-msg.out .cl-k { color: var(--lime-ink); }
.cl-msg.ok b { color: var(--lime-ink); }
.cl-msg .i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.cl-msg a { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); color: var(--lime-ink); font-weight: 600; }
.cl-handoff { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(17 * var(--u)); border: 1px solid var(--ink); border-radius: var(--r); background: var(--ink); color: #fff; font-size: calc(15 * var(--u)); }
.cl-handoff b { font-weight: 600; }
.cl-handoff span { margin-left: auto; color: #c9c9c9; }
.cl-handoff .i { color: var(--lime); }

/* a short chain of words, the last one lit */
.cl-flow { display: flex; flex-wrap: wrap; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(30 * var(--u)); }
.cl-flow.mid { justify-content: center; margin-top: calc(56 * var(--u)); }
.cl-flow span { padding: calc(8 * var(--u)) calc(16 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: calc(15 * var(--u)); font-weight: 600; color: var(--muted); }
.cl-flow .on { border-color: var(--lime-ico); background: var(--lime); color: var(--ink); }
.cl-flow .i { color: var(--faint); }

/* =========================================================
   PHONE SCREENS
   ========================================================= */
.cl-phone { max-width: calc(380 * var(--u)); border: 1px solid var(--rule); border-radius: calc(26 * var(--u)); background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.cl-phone.sm { max-width: none; border-radius: var(--r-card); }
.cl-phone__top { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)); border-bottom: 1px solid var(--rule); background: #fcfcfb; font-size: calc(14 * var(--u)); font-weight: 600; }
.cl-phone__body { display: grid; gap: calc(12 * var(--u)); padding: calc(18 * var(--u)); background: var(--grey); }
.cl-phone .cl-msg { font-size: calc(15 * var(--u)); line-height: calc(23 * var(--u)); }
.cl-mbtn { display: block; padding: calc(12 * var(--u)); border-radius: var(--r); background: var(--lime); text-align: center; font-size: calc(15 * var(--u)); font-weight: 600; color: var(--ink); }
.cl-mbtn:hover { background: var(--lime-ico); }
.cl-stars { display: flex; gap: calc(6 * var(--u)); justify-content: center; padding: calc(6 * var(--u)) 0 calc(2 * var(--u)); }
.cl-stars .i { width: calc(26 * var(--u)); height: calc(26 * var(--u)); fill: var(--lime); stroke: var(--lime-ico); }

.cl-screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(24 * var(--u)); }

/* during the visit: the photograph carries the moment */
.cl-during { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); column-gap: calc(88 * var(--u)); align-items: center; }
.cl-shot { position: relative; }
/* the source is a tall portrait; 4:5 keeps the waiting area in shot without
   the figure running taller than the panel beside it */
.cl-shot img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; border-radius: var(--r-card); }

/* patient experience: the prompt beside what the clinic sees */
.cl-exp { display: grid; gap: calc(20 * var(--u)); }
.cl-score { display: flex; align-items: baseline; gap: calc(9 * var(--u)); }
.cl-score b { font-family: var(--font-head); font-size: calc(46 * var(--u)); line-height: 1; font-weight: 500; letter-spacing: -.03em; }
.cl-score .i { width: calc(22 * var(--u)); height: calc(22 * var(--u)); fill: var(--lime); stroke: var(--lime-ico); align-self: center; }
.cl-score span { margin-left: calc(6 * var(--u)); font-size: calc(14 * var(--u)); color: var(--muted); }

/* =========================================================
   FOLLOW-UP TRACK — six steps, each arriving in turn
   ========================================================= */
/* no column-gap: the columns stay exactly 1/6 each so the rail can be drawn
   from the first marker's centre to the last one's. The air between steps is
   padding inside the item instead. */
.cl-track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.cl-track::before { content: ""; position: absolute; top: calc(6 * var(--u)); left: calc(7 * var(--u)); right: calc(100% / 6 - 7 * var(--u)); height: 2px; background: var(--divider); }
.cl-track::after { content: ""; position: absolute; top: calc(6 * var(--u)); left: calc(7 * var(--u)); width: 0; height: 2px; background: var(--lime-ico); transition: width 1.9s var(--ease); }
.cl-track.is-in::after { width: calc(100% - 100% / 6); }
.cl-track li { display: grid; justify-items: start; gap: calc(14 * var(--u)); padding-right: calc(22 * var(--u)); opacity: .38; transition: opacity .5s var(--ease); }
.cl-track.is-in li { opacity: 1; transition-delay: calc(var(--i) * 210ms); }
.cl-track i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; border: 2px solid var(--divider); background: #fff; transition: border-color .5s var(--ease), background .5s var(--ease); }
.cl-track.is-in i { border-color: var(--lime-ico); background: var(--lime); transition-delay: calc(var(--i) * 210ms); }
.cl-track b { font-size: calc(17 * var(--u)); font-weight: 600; letter-spacing: -.02em; }
.cl-track > li > span:not(.cl-tag) { font-size: calc(13.5 * var(--u)); color: var(--muted); }

/* =========================================================
   CLINIC VISIBILITY
   ========================================================= */
.cl-kpis { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background: #fff; }
.cl-kpis > div { padding: calc(22 * var(--u)) calc(18 * var(--u)); }
.cl-kpis > div + div { border-left: 1px solid var(--rule); }
.cl-kpis b { display: block; font-family: var(--font-head); font-size: calc(34 * var(--u)); line-height: 1.1; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cl-kpis span { display: block; margin-top: calc(6 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 600; color: var(--muted); }
.cl-kpis > div.on { background: var(--lime-soft); }

.cl-pipe { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: calc(14 * var(--u)); margin-top: calc(28 * var(--u)); }
.cl-pipe li { display: grid; gap: calc(10 * var(--u)); }
.cl-pipe b { font-size: calc(15 * var(--u)); font-weight: 600; }
/* a funnel, not five equal bars: the taper is what says "where they are
   getting stuck", and it carries the meaning without the colour (§34) */
.cl-pipe i { display: block; height: calc(8 * var(--u)); border-radius: 999px; background: var(--lime); }
.cl-pipe li:nth-child(1) i { width: 100%; }
.cl-pipe li:nth-child(2) i { width: 84%; background: var(--lime-ico); }
.cl-pipe li:nth-child(3) i { width: 71%; background: var(--lime-ico); opacity: .72; }
.cl-pipe li:nth-child(4) i { width: 46%; background: var(--divider); }
.cl-pipe li:nth-child(5) i { width: 31%; background: var(--divider); opacity: .7; }
.cl-sec .cl-pipe + .cl-statement { max-width: calc(760 * var(--u)); }

/* =========================================================
   ROLES — rows, not five large cards
   ========================================================= */
.cl-roles { display: grid; border-top: 1px solid var(--rule); }
.cl-roles > article { display: grid; grid-template-columns: calc(56 * var(--u)) minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; column-gap: calc(36 * var(--u)); padding: calc(30 * var(--u)) 0; border-bottom: 1px solid var(--rule); transition: background .2s var(--ease); }
.cl-roles > article:hover { background: var(--soft); }
.cl-roles .n { font-size: calc(13 * var(--u)); font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.cl-roles h3 { font-family: var(--font-head); font-size: calc(26 * var(--u)); line-height: calc(33 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.cl-need { margin-top: calc(7 * var(--u)); max-width: calc(420 * var(--u)); font-size: calc(15.5 * var(--u)); line-height: calc(24 * var(--u)); color: var(--muted); }
.cl-roles ul { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.cl-roles li { padding: calc(7 * var(--u)) calc(13 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: calc(14 * var(--u)); font-weight: 500; color: var(--muted); }
.cl-roles > article:hover li { border-color: var(--lime-ico); color: var(--text); }

/* =========================================================
   WHERE IT FITS — three bands, only the middle one lime
   ========================================================= */
.cl-stack { display: grid; justify-items: center; }
.cl-band { width: 100%; max-width: calc(880 * var(--u)); display: grid; justify-items: center; gap: calc(14 * var(--u)); padding: calc(24 * var(--u)) calc(28 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; }
.cl-band ul { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(10 * var(--u)); }
.cl-band li { padding: calc(9 * var(--u)) calc(17 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: calc(15 * var(--u)); font-weight: 600; }
.cl-band.lime { border-color: var(--lime-ico); background: var(--lime); }
.cl-band.lime .cl-k { color: var(--lime-ink); }
.cl-band.lime li { border-color: rgba(63, 90, 0, .22); background: rgba(255, 255, 255, .72); }
.cl-band.ink { border-color: var(--ink); background: var(--ink); }
.cl-band.ink .cl-k { color: #b9b9b9; }
.cl-band.ink li { border-color: #3a3a3a; background: transparent; color: #fff; }
.cl-join { width: 2px; height: calc(30 * var(--u)); background: var(--divider); }
.cl-join:first-of-type { background: linear-gradient(var(--divider), var(--lime-ico)); }
.cl-join:last-of-type { background: linear-gradient(var(--lime-ico), var(--divider)); }

/* =========================================================
   RECAP — the whole page told back as one story
   ========================================================= */
.cl-recap { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(10 * var(--u)); }
.cl-recap li { display: flex; align-items: center; gap: calc(10 * var(--u)); opacity: .34; transition: opacity .5s var(--ease); }
.cl-recap.is-in li { opacity: 1; transition-delay: calc(var(--i) * 130ms); }
.cl-recap li + li::before { content: ""; width: calc(14 * var(--u)); height: 1px; background: var(--divider); }
.cl-recap span { padding: calc(10 * var(--u)) calc(17 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: calc(15 * var(--u)); font-weight: 600; }
.cl-recap .on span { border-color: var(--lime-ico); background: var(--lime); }

/* =========================================================
   FAQ
   ========================================================= */
.cl-faq { max-width: calc(920 * var(--u)); margin-top: calc(56 * var(--u)); border-top: 1px solid var(--rule); }
.cl-faq details { border-bottom: 1px solid var(--rule); }
.cl-faq summary { display: flex; align-items: center; gap: calc(18 * var(--u)); padding: calc(24 * var(--u)) 0; cursor: pointer; list-style: none; font-family: var(--font-head); font-size: calc(22 * var(--u)); line-height: calc(29 * var(--u)); font-weight: 500; letter-spacing: -.028em; transition: color .15s ease; }
.cl-faq summary::-webkit-details-marker { display: none; }
.cl-faq summary:hover { color: var(--lime-ink); }
.cl-faq summary::after { content: ""; flex: none; width: calc(11 * var(--u)); height: calc(11 * var(--u)); margin-left: auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(calc(-2 * var(--u)), calc(-2 * var(--u))); transition: transform .25s var(--ease); }
.cl-faq details[open] summary::after { transform: rotate(-135deg); }
.cl-faq p { padding: 0 calc(48 * var(--u)) calc(26 * var(--u)) 0; max-width: calc(760 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(27 * var(--u)); color: var(--prose); }

/* =========================================================
   FINAL CTA — back to the people
   ========================================================= */
.cl-cta { padding: calc(130 * var(--u)) var(--pad); border-top: 1px solid var(--rule); }
.cl-cta__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); column-gap: calc(88 * var(--u)); align-items: center; }
.cl-cta .cl-h2 { max-width: calc(620 * var(--u)); }

/* three people, one lime line running between them */
.cl-trio { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(18 * var(--u)); align-items: center; }
.cl-trio::before { content: ""; position: absolute; top: 50%; left: 14%; right: 14%; height: 2px; background: var(--lime-ico); }
.cl-trio img { position: relative; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: center 34%; border-radius: 50%; border: calc(5 * var(--u)) solid #fff; }
.cl-trio img:nth-child(2) { object-position: 62% center; }

/* =========================================================
   MOTION
   ========================================================= */
.cl-js .cl-rev { opacity: 0; transform: translateY(calc(12 * var(--u))); }
.cl-js .cl-rev.is-in { opacity: 1; transform: none; transition: opacity .75s ease var(--d, 0ms), transform .75s var(--ease) var(--d, 0ms); }
@media (prefers-reduced-motion: reduce) {
  .cl *, .cl *::before, .cl *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; }
}

/* =========================================================
   Below 1180 --u is 1px. Stack, don't shrink (guidelines §10).
   ========================================================= */
@media (max-width: 1179px) {
  .cl { --pad: 22px; }
  .cl .i { width: 16px; height: 16px; }
  .cl-h1 { font-size: clamp(32px, 7.4vw, 48px); line-height: 1.08; }
  .cl-h2 { font-size: clamp(26px, 5.6vw, 36px); line-height: 1.16; }
  .cl-h3 { font-size: 20px; line-height: 27px; }
  .cl-lede { font-size: 17px; line-height: 26px; max-width: none; }
  .cl-sub { font-size: 16px; line-height: 25px; max-width: none; }
  .cl-statement { font-size: 20px; line-height: 28px; max-width: none; margin-top: 26px; }
  .cl-statement.mid { margin-top: 36px; }
  .cl-quote { font-size: 24px; line-height: 32px; margin-top: 28px; }
  .cl-ctas { margin-top: 28px; flex-direction: column; align-items: stretch; }

  .cl-sec { padding: 56px 22px; }
  .cl-stage { margin-top: 32px; }
  /* minmax(0, 1fr), not 1fr: a plain 1fr track sizes to the panel's
     min-content and the front desk ends up wider than the phone */
  .cl-split, .cl-split.wide, .cl-during, .cl-cta__grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }

  .cl-hero { padding: 44px 22px 56px; }
  .cl-hero__grid { display: block; }
  .cl-hero .cl-sub { max-width: none; }
  .cl-alongside { max-width: none; margin-top: 28px; }
  .cl-hero__art { margin-top: 32px; }

  /* the notes come out of the photograph and sit under it as a list */
  .cl-note { position: static; max-width: none; margin-top: 10px; }
  .cl-hero__art .cl-note:first-of-type, .cl-shot .cl-note:first-of-type { margin-top: 14px; }

  /* the journey turns vertical, stage by stage */
  .cl-journey { grid-auto-flow: row; grid-auto-columns: auto; margin-top: 34px; padding-left: 6px; }
  .cl-journey::before { top: 7px; bottom: 7px; left: 6px; right: auto; width: 2px; height: auto; }
  .cl-journey::after { top: 7px; left: 6px; width: 2px; height: 0; transition: height 1.8s var(--ease); }
  .cl-journey.is-in::after { width: 2px; height: calc(100% - 100% / 9); }
  .cl-journey li { grid-auto-flow: column; grid-template-columns: 14px minmax(0, 1fr); justify-items: start; align-items: center; gap: 16px; padding: 9px 0; }
  .cl-journey span { font-size: 16px; }

  .cl-chans { grid-template-columns: minmax(0, 1fr); }
  .cl-funnel { height: 26px; }
  .cl-funnel::before, .cl-funnel i { display: none; }
  .cl-funnel::after { left: 12px; }

  .cl-fields.two { grid-template-columns: minmax(0, 1fr); row-gap: 15px; }
  .cl-desk { grid-template-columns: minmax(0, 1fr); }
  .cl-desk__side { border-left: 0; border-top: 1px solid var(--rule); }

  .cl-screens { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cl-phone { max-width: none; }
  .cl-flow.mid { margin-top: 32px; }

  /* the follow-up track becomes a vertical timeline too */
  .cl-track { grid-auto-flow: row; grid-auto-columns: auto; padding-left: 6px; }
  .cl-track::before { top: 7px; bottom: 7px; left: 6px; right: auto; width: 2px; height: auto; }
  .cl-track::after { top: 7px; left: 6px; width: 2px; height: 0; transition: height 1.9s var(--ease); }
  .cl-track.is-in::after { width: 2px; height: calc(100% - 100% / 6); }
  .cl-track li { grid-template-columns: 14px minmax(0, 1fr); grid-auto-flow: column; align-items: center; gap: 16px; padding: 11px 0 11px 0; }
  .cl-track li > b { grid-column: 2; }
  .cl-track li > span, .cl-track li > .cl-tag { grid-column: 2; justify-self: start; }

  /* three KPIs first, the rest below */
  .cl-kpis { grid-template-columns: repeat(3, 1fr); }
  .cl-kpis > div:nth-child(3n + 1) { border-left: 0; }
  .cl-kpis > div:nth-child(n + 4) { border-top: 1px solid var(--rule); }
  .cl-kpis b { font-size: 26px; }
  .cl-kpis { font-size: 12px; }
  .cl-pipe { grid-auto-flow: row; grid-auto-columns: auto; }
  .cl-pipe li { grid-template-columns: minmax(0, 1fr) 42%; align-items: center; gap: 14px; }

  .cl-roles > article { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding: 24px 0; }
  .cl-roles h3 { font-size: 21px; line-height: 28px; }
  .cl-need { max-width: none; }

  .cl-band { max-width: none; }
  .cl-band li { font-size: 14px; padding: 8px 14px; }

  .cl-recap { justify-content: flex-start; }
  .cl-recap li { width: 100%; }
  .cl-recap li + li::before { display: none; }
  .cl-recap span { width: 100%; }

  .cl-faq summary { font-size: 19px; line-height: 26px; padding: 20px 0; gap: 14px; }
  .cl-faq p { font-size: 16px; line-height: 25px; padding: 0 0 22px; }

  .cl-cta { padding: 72px 22px; }
  .cl-trio::before { left: 10%; right: 10%; }
  .cl-trio img { border-width: 4px; }
}

@media (max-width: 560px) {
  .cl-kpis { grid-template-columns: repeat(2, 1fr); }
  .cl-kpis > div:nth-child(3n + 1) { border-left: 1px solid var(--rule); }
  .cl-kpis > div:nth-child(odd) { border-left: 0; }
  .cl-kpis > div:nth-child(n + 3) { border-top: 1px solid var(--rule); }
}