/* Journey — the vertical dotted spine with card | node | copy stops, plus the .flow-card mocks it
   uses. SHARED by /specialists/ (#coordinate, six stops) and /allied-health/ (#how, five stops) since
   2026-09-13; behaviour in assets/js/journey.js. Lifted out of specialists.css when the second
   consumer arrived. A page using it adds this file to extraCss and journey.js to extraJs. */

/* ---- flow-card: the small app mock used as a stop's illustration (also the flow board's cards) ---- */
/* ---- Flow board: the three-step illustration ----
   ⚠️ PROMOTED FROM specialists.css 2026-09-13 when /allied-health/ adopted the same
   illustration for its sign-up steps. Both pages already loaded journey.css, which owns
   .flow-card and its innards, so the positioning belongs here with it — not duplicated.
   The board is a fixed 1300x560 canvas that fitFlow() in journey.js scales to its container
   and linearises below 760px via .flow-stacked. ⚠️ The SVG arrow paths are drawn against
   these exact coordinates, so moving .flow-step.s1/s2/s3 means redrawing every path. */
.flow-stage { position:relative; width:100%; margin-top:var(--space-2xs); }
.flow-board { position:relative; width:1300px; height:560px; transform-origin:top left; }
.flow-arrows { position:absolute; inset:0; width:1300px; height:560px; z-index:0; overflow:visible; pointer-events:none; }
.flow-arrows .float-dot { fill:var(--color-accent); stroke:#fff; stroke-width:1.4; }
.flow-step { position:absolute; width:340px; display:flex; flex-direction:column; align-items:center; text-align:center; z-index:1; }
.flow-step.s1 { left:0; top:24px; }
.flow-step.s2 { left:480px; top:150px; }
.flow-step.s3 { left:960px; top:6px; }
.flow-stacked .flow-board { position:static; width:100%; height:auto; transform:none !important; }
.flow-stacked .flow-arrows { display:none; }
.flow-stacked .flow-step { position:static; width:100%; max-width:340px; margin:0 auto var(--space-l); left:auto; top:auto; }

.flow-card { position:relative; width:300px; height:206px; background:var(--brand-25); border:none; border-radius:22px;
  box-shadow:0 26px 50px -26px rgba(34,82,120,.5); padding:var(--space-s); display:flex; flex-direction:column; }
.flow-card .num { position:absolute; top:-15px; right:-15px; width:46px; height:46px; border-radius:var(--radius-full);
  background:#fff; color:var(--color-secondary); font-weight:var(--weight-bold); font-size:21px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px -7px rgba(34,82,120,.6); border:3px solid var(--brand-50); z-index:3; }
.flow-step.s2 .num { color:var(--color-primary); }
.flow-step.s3 .num { color:var(--brand-600); }
.flow-step h3 { margin-top:var(--space-m); color:var(--color-secondary); letter-spacing:-.01em; }
.flow-step p { margin-top:var(--space-xs); max-width:330px; font-size:var(--text-md); line-height:var(--line-relaxed); color:var(--color-ink-soft); }
.flow-card .winbar { display:flex; align-items:center; justify-content:space-between; padding-bottom:var(--space-2xs); border-bottom:1px solid var(--color-border-soft); }
.flow-card .wb-title { font-size:11.5px; font-weight:var(--weight-semibold); letter-spacing:.04em; color:var(--color-ink-muted); text-transform:uppercase; }
.flow-card .ic { width:15px; height:15px; display:block; }
.flow-card .avatar { border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:var(--weight-bold); flex:0 0 auto;
  background:linear-gradient(150deg,var(--brand-600),var(--color-secondary)); }
.flow-card .join-btn { display:inline-flex; align-items:center; margin-left:auto; flex:0 0 auto; font:inherit;
  background:linear-gradient(135deg, var(--color-success), oklch(from var(--color-success) calc(l + 0.1) c h)); color:#fff; border:none; font-size:12.5px; font-weight:var(--weight-semibold); padding:var(--space-2xs) var(--space-s); border-radius:var(--radius-full);
  box-shadow:0 8px 16px -8px rgba(46,139,87,.7); }
.flow-card .pt-row { display:flex; align-items:center; gap:var(--space-xs); margin-top:var(--space-xs); }
.flow-card .pt-row .avatar { width:40px; height:40px; font-size:14px; }
.flow-card .pt-name { font-size:14.5px; font-weight:var(--weight-semibold); color:var(--color-ink); }
.flow-card .pt-clinical { margin-top:var(--space-xs); font-size:12px; line-height:var(--line-normal); color:var(--color-ink-soft); text-align:left; }
.flow-card .flag-row { display:flex; align-items:center; gap:var(--space-2xs); margin-top:var(--space-xs); background:rgba(103,184,220,.16); border-radius:var(--radius-lg); padding:var(--space-2xs) var(--space-xs); }
.flow-card .flag-row .ft { font-size:12.5px; font-weight:var(--weight-semibold); color:var(--color-primary); }
.flow-card .flag-row .ic { color:var(--color-primary); }
.flow-card .flag-row .chk { margin-left:auto; width:18px; height:18px; border-radius:var(--radius-full); background:var(--color-primary); display:flex; align-items:center; justify-content:center; }
.flow-card .flag-row .chk svg { width:11px; height:11px; color:#fff; }
.flow-card .pulse { animation:flow-pulse 2s ease-in-out infinite; }
@keyframes flow-pulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }
.flow-card .cal-row { display:flex; align-items:center; gap:var(--space-xs); margin-top:var(--space-xs); }
.flow-card .datechip { width:48px; height:54px; border-radius:var(--radius-lg); background:var(--brand-50); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; flex:0 0 auto; }
.flow-card .dc-mon { font-size:10px; font-weight:var(--weight-bold); letter-spacing:.08em; color:var(--color-primary); text-transform:uppercase; }
.flow-card .dc-day { font-size:21px; font-weight:var(--weight-bold); color:var(--color-secondary); line-height:var(--line-none); }
.flow-card .cal-meta { display:flex; flex-direction:column; align-items:flex-start; line-height:var(--line-snug); }
.flow-card .cal-title { font-size:14.5px; font-weight:var(--weight-semibold); color:var(--color-ink); white-space:nowrap; }
.flow-card .cal-time { font-size:12px; color:var(--color-ink-muted); margin-top:var(--space-3xs); white-space:nowrap; }
.flow-card .cal-sub { margin-top:var(--space-s); padding-top:var(--space-xs); border-top:1px solid var(--color-border-soft); display:flex; flex-direction:column; gap:var(--space-xs); }
.flow-card .cal-line { display:flex; align-items:center; gap:var(--space-2xs); font-size:12.5px; color:var(--color-ink-soft); }
.flow-card .cal-line .ic { color:var(--color-ink-muted); width:15px; height:15px; flex:0 0 auto; }
.flow-card .cal-line strong { color:var(--color-ink); font-weight:var(--weight-semibold); }
.flow-card .cal-pt-thumb { width:24px; height:24px; font-size:9.5px; flex:0 0 auto; }
.flow-card.video { padding:var(--space-xs); }
.flow-card .tiles { display:grid; grid-template-columns:1.55fr 1fr; grid-template-rows:1fr 1fr; gap:var(--space-2xs); flex:1; }
.flow-card .tile.big { grid-row:1 / 3; }
.flow-card .tile { border-radius:var(--radius-lg); position:relative; overflow:hidden; background:var(--brand-100); }
.flow-card .tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.flow-card .tile::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(13,33,49,.62), transparent 48%); }
.flow-card .tile-name { position:absolute; left:7px; bottom:5px; z-index:2; pointer-events:none; color:#fff; font-size:9.5px; font-weight:var(--weight-medium); text-shadow:0 1px 2px rgba(0,0,0,.45); }
.flow-card .livedot { position:absolute; top:7px; right:7px; z-index:2; width:8px; height:8px; border-radius:var(--radius-full); background:var(--color-success); box-shadow:0 0 0 2px rgba(255,255,255,.55); }
.flow-card .controls { display:flex; align-items:center; justify-content:center; gap:var(--space-2xs); margin-top:var(--space-xs); }
.flow-card .ctrl { width:36px; height:36px; border-radius:var(--radius-full); background:var(--brand-50); color:var(--color-secondary); display:flex; align-items:center; justify-content:center; }
.flow-card .ctrl .ic { width:17px; height:17px; }
.flow-card .ctrl.end { background:var(--color-error); color:#fff; }

/* ---- The coordinate journey (#coordinate) ----
   A vertical spine. Steps 1–5: card | node | copy on a three-column grid, alternating sides by
   :nth-child. Wide stops (Get rebated, CPD): node in a left gutter, content beside it. The dotted
   path and the dot are one SVG sized to the whole .journey by journey.js (buildJourney); it sits
   behind the content, and the wide stops' gutter keeps the line out of their content. */
.journey { position:relative; margin-top:var(--space-xl); }
.journey-line { position:absolute; inset:0; z-index:0; overflow:visible; pointer-events:none; display:block; }
.journey-line .float-dot { fill:var(--color-accent); stroke:#fff; stroke-width:1.6; }
/* ⚠️ Vertical padding is --space-xl: a 96px gap between stops. Settled 2026-09-14 after three
   passes — trimmed to --space-xs, back to --space-l, then raised on /allied-health/ alone, which
   the owner then signed off as "perfect" and asked for on /specialists/ too. So it lives HERE, on
   the shared rule, and both journeys use it; don't re-scope it per page or trim it on the strength
   of the "Pick your slot → Pick your patient" example, which is the pair that needed MORE room.
   Gaps still READ as uneven because the copy is centred against cards of very different heights
   (a 124px copy beside a 206px card leaves ~40px of slack either side); padding is the only
   uniform lever. */
.jstep { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr); align-items:center;
  column-gap:var(--space-l); padding:var(--space-xl) 0; }
.jcard { display:flex; justify-content:flex-end; }
.jcard .flow-card { margin:0; }
/* The eligibility panel on stop 2: a real tile, chips at full size. */
.jelig-label { margin:0 0 var(--space-3xs); font-size:var(--text-xs); font-weight:var(--weight-semibold); text-transform:uppercase; letter-spacing:.08em; color:var(--color-primary); }
/* Stop 3: the team-builder mock (a taller flow-card) and the three-move list beside it. */
.flow-card.tall { height:auto; min-height:206px; }
/* Clinician reel (stop 3): a masked viewport, the row list rendered twice, translated by half its
   height on a loop so the join is invisible. */
.flow-card.reel { min-height:280px; }
.flow-card .reel-vp { position:relative; height:196px; overflow:hidden; margin-top:var(--space-2xs);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); }
.flow-card .reel-track { display:flex; flex-direction:column; animation:reel-scroll 28s linear infinite; }
.flow-card .reel-vp:hover .reel-track { animation-play-state:paused; }
.flow-card .reel-row { display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:var(--space-xs); padding:7px 0; border-top:1px solid var(--color-border-soft); text-align:left; }
.flow-card .reel-row:first-child { border-top:none; }
.flow-card .reel-row img { width:40px; height:40px; border-radius:var(--radius-full); object-fit:cover; display:block; }
.flow-card .reel-name { font-size:13px; font-weight:var(--weight-semibold); color:var(--color-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.flow-card .reel-prof { font-size:11px; font-weight:var(--weight-semibold); color:var(--color-primary); background:var(--brand-50); border-radius:var(--radius-full); padding:3px 8px; white-space:nowrap; }
@keyframes reel-scroll { from { transform:translateY(0); } to { transform:translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .flow-card .reel-track { animation:none; } }
.flow-card .pt-row { margin-top:6px; }
.flow-card .pt-row .avatar { width:28px; height:28px; font-size:10.5px; }
.flow-card .pt-name { font-size:13px; }
.flow-card .tm-avail { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:var(--weight-semibold); color:var(--color-success); white-space:nowrap; }
.flow-card .tm-avail::before { content:""; width:7px; height:7px; border-radius:var(--radius-full); background:var(--color-success); }
.flow-card .pt-role { margin-left:var(--space-2xs); }
.jcard .jshot { width:100%; max-width:420px; }

/* ---- stop 2: card-left override + eligibility chips under the copy ---- */
/* Stop 2 is an even row (copy left) but the owner wanted the add-patient illustration on the LEFT and
   the chips under the copy (2026-09-13). .flip inverts the alternation for that one stop; the spine
   is measured from the node positions so it needs nothing. Desktop only — mobile stacks everything. */
@media (min-width:821px) {
  .jstep.flip .jcard { order:1; justify-content:flex-end; }
  .jstep.flip .jnode { order:2; }
  .jstep.flip .jcopy { order:3; text-align:left; justify-self:start; }
}
.jlist { list-style:none; margin:var(--space-2xs) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--space-xs); }
.jlist li { font-size:var(--text-md); line-height:var(--line-relaxed); color:var(--color-ink-soft); padding-left:var(--space-s); border-left:2px solid var(--color-accent); }
.jlist strong { color:var(--color-secondary); }
.jcopy .jrule { margin-top:var(--space-m); }
.jcopy .jchips { margin-top:var(--space-s); gap:var(--space-3xs); }
.jcopy .jrule + .jchips { margin-top:var(--space-2xs); }
.jcopy .jchips-right { justify-content:flex-end; margin-left:0; margin-right:0; }
.jlist .jsub { display:block; font-size:var(--text-sm); color:var(--color-ink-muted); margin-top:2px; }
/* Aside note inside a journey copy column: dark, fits its content, icon-led — deliberately NOT the
   column-wide .callout, which did not stand out. */
.jnote { display:inline-flex; align-items:flex-start; gap:var(--space-xs); width:fit-content; max-width:min(100%, 380px); margin-top:var(--space-m); padding:var(--space-s) var(--space-m); border-radius:var(--radius-xl); background:var(--color-secondary); color:#fff; font-size:var(--text-sm); line-height:var(--line-relaxed); box-shadow:var(--shadow-sm); text-align:left; }
.jnote strong { color:#fff; }
/* Bottom-right, mostly OFF the card (owner, 2026-09-13: "further off to the side so only slight
   overlay"). The card is pushed left by the same distance the note hangs right, so the note stays
   inside the column and never crosses the spine gutter. ~70px of the 250px note sits on the card. */
.jfloat { position:relative; display:flex; flex-direction:column; align-items:flex-end; margin-right:180px; }
.jfloat .flow-card { margin-bottom:var(--space-m); }
.jnote-float { position:absolute; bottom:-14px; right:-180px; z-index:2; max-width:250px; margin:0; padding:var(--space-xs) var(--space-s); font-size:13px; box-shadow:var(--shadow-md, var(--shadow-sm)); transform:rotate(-1.5deg); }
@media (max-width:1100px) { .jfloat { margin-right:120px; } .jnote-float { right:-120px; } }
@media (max-width:820px) { .jfloat { margin-right:0; align-items:flex-start; } .jfloat .flow-card { margin-bottom:0; } .jnote-float { position:static; transform:none; max-width:min(100%, 380px); margin-top:var(--space-s); order:2; } }
.jnote svg { flex:0 0 auto; width:20px; height:20px; margin-top:2px; color:var(--color-accent); stroke:currentColor; fill:none; stroke-width:2; }
.jcopy h3 + .jrule { margin-top:0; margin-bottom:var(--space-2xs); }
.jcopy .jrule + p { margin-top:0; }
.jcopy .jrule strong { color:var(--color-secondary); }

/* ---- add-patient mock (stop 2) ---- */
.flow-card.addpt { height:auto; min-height:206px; }
.flow-card .ap-field { display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-top:var(--space-xs); text-align:left; }
.flow-card .ap-lbl { font-size:10.5px; font-weight:var(--weight-semibold); letter-spacing:.06em; text-transform:uppercase; color:var(--color-ink-muted); }
.flow-card .ap-val { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:var(--weight-semibold); color:var(--color-ink); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:6px 10px; }
.flow-card .ap-val em { font-style:normal; font-weight:var(--weight-regular); font-size:12px; color:var(--color-ink-muted); }
.flow-card .ap-caret { width:1.5px; height:15px; background:var(--color-primary); animation:ap-blink 1s steps(2, start) infinite; }
.flow-card .ap-chips { display:flex; flex-wrap:wrap; gap:5px; }
.flow-card .ap-chip { font-size:11.5px; font-weight:var(--weight-semibold); padding:3px 9px; border-radius:var(--radius-full); background:var(--color-primary); color:#fff; }
@keyframes ap-blink { to { visibility:hidden; } }
/* One 9s loop shared by every .ap-a; --d offsets each so they arrive in sequence and fade out in
   the same order. `backwards` holds the hidden 0% state during the initial delay. */
.flow-card .ap-a { animation:jpop 9s ease-out infinite backwards; animation-delay:var(--d, 0s); }
@keyframes jpop { 0% { opacity:0; transform:translateY(5px); } 5% { opacity:1; transform:none; } 88% { opacity:1; } 96%, 100% { opacity:0; } }

/* ---- Statement of Participation certificate (stop 6) ---- */
.flow-card.cert { height:auto; min-height:206px; background:var(--color-surface); box-shadow:0 26px 50px -26px rgba(34,82,120,.5), inset 0 0 0 1px var(--color-border-soft), inset 0 0 0 5px var(--color-surface), inset 0 0 0 6px var(--brand-100); padding:var(--space-m); text-align:left; }
.flow-card .cert-head { display:flex; align-items:center; gap:var(--space-xs); padding-bottom:var(--space-xs); border-bottom:1px solid var(--color-border-soft); }
.flow-card .cert-head > div { display:flex; flex-direction:column; line-height:var(--line-snug); }
.flow-card .cert-mark { width:30px; height:30px; color:var(--color-secondary); flex:0 0 auto; }
.flow-card .cert-mark svg { width:100%; height:100%; display:block; }
.flow-card .cert-kicker { font-size:9.5px; font-weight:var(--weight-bold); letter-spacing:.12em; text-transform:uppercase; color:var(--color-primary); }
.flow-card .cert-title { font-size:14px; font-weight:var(--weight-extrabold); color:var(--color-secondary); letter-spacing:-.01em; }
.flow-card .cert-to { margin:var(--space-xs) 0 2px; font-size:11.5px; color:var(--color-ink-muted); }
.flow-card .cert-to strong { color:var(--color-ink); }
.flow-card .cert-act { margin:0 0 var(--space-xs); font-size:14.5px; font-weight:var(--weight-bold); color:var(--color-secondary); line-height:var(--line-snug); }
.flow-card .cert-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px var(--space-s); margin:0; padding:var(--space-xs) 0; border-top:1px solid var(--color-border-soft); border-bottom:1px solid var(--color-border-soft); }
.flow-card .cert-grid dt { font-size:9.5px; font-weight:var(--weight-semibold); letter-spacing:.08em; text-transform:uppercase; color:var(--color-ink-muted); }
.flow-card .cert-grid dd { margin:1px 0 0; font-size:12px; font-weight:var(--weight-semibold); color:var(--color-ink); }
.flow-card .cert-grid dd strong { color:var(--color-primary); font-size:13px; }
.flow-card .cert-foot { display:flex; align-items:center; justify-content:space-between; margin-top:var(--space-xs); }
.flow-card .cert-ref { font-size:10px; color:var(--color-ink-muted); letter-spacing:.02em; }
.flow-card .cert-seal { width:34px; height:34px; border-radius:var(--radius-full); background:var(--color-primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 0 0 3px var(--color-surface), 0 0 0 4px var(--brand-100); }
.flow-card .cert-seal svg { width:16px; height:16px; }
.jcopy .feat-pills { margin-top:var(--space-s); }
.jstep:nth-child(even) .jcopy .feat-pills { justify-content:flex-end; }
/* Three pills, one line (owner, 2026-09-14): the set needs ~457px and the default .jcopy column caps
   at 380px, so they wrapped 2+1. The stop carrying them now takes .jcopy-wide (520px) as well — both
   are needed; widening alone still lets a long label break the row. Mobile keeps the shared wrap. */
@media (min-width:821px) { .jcopy .feat-pills { flex-wrap:nowrap; } }
/* ⚠️ THE SPINE PASSES BEHIND THE COPY, and that is wanted — but with no ground colour the
   dots showed through the gaps in the letterforms and wrecked the contrast (owner, 2026-09-14).
   The copy block now paints the section's own ground so the line is occluded behind it.
   ⚠️ --journey-ground must be set by any page that puts the journey on a non-default ground:
   /specialists/ uses .block (page ground, the default here); /allied-health/ puts it on
   .ahd-sec.on-tint and sets the variable in allied-health.css. Get it wrong and the copy
   renders as a pale rectangle on a tinted band. */
.jcopy { text-align:left; max-width:380px;
  background:var(--journey-ground, var(--color-page));
  padding:var(--space-2xs) var(--space-xs); border-radius:var(--radius-md); }
.jcopy h3 { margin:0 0 var(--space-xs); color:var(--color-secondary); letter-spacing:-.01em; }
.jcopy p { margin:0; font-size:var(--text-md); line-height:var(--line-relaxed); color:var(--color-ink-soft); }
.jstep:nth-child(odd) .jcard { order:1; } .jstep:nth-child(odd) .jnode { order:2; } .jstep:nth-child(odd) .jcopy { order:3; }
.jstep:nth-child(even) .jcopy { order:1; text-align:right; justify-self:end; } .jstep:nth-child(even) .jnode { order:2; } .jstep:nth-child(even) .jcard { order:3; justify-content:flex-start; }
.jnode { display:flex; align-items:center; justify-content:center; }
.jnode span { position:relative; width:46px; height:46px; border-radius:var(--radius-full); background:var(--color-surface); border:3px solid var(--color-primary);
  color:var(--color-secondary); font-weight:var(--weight-extrabold); font-size:18px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); }
/* ⚠️ The ring pulses on the CURRENT stop only (2026-09-16), not on every node at once. journey.js
   puts .is-active on whichever stop the travelling dot has reached, and the dot itself is driven by
   scroll position — so the pulse follows the reader down the page instead of running in a loop
   everywhere. With no JS (or reduced motion) nothing pulses and every stop stays fully legible:
   the active state adds emphasis, it never removes any. */
.jnode span::after { content:""; position:absolute; inset:-3px; border-radius:inherit; border:3px solid var(--color-accent); opacity:0; }
.jstep.is-active .jnode span::after { animation:jpulse 2.6s ease-out infinite; }
.jstep.is-active .jnode span { border-color:var(--color-accent); box-shadow:0 0 0 6px oklch(from var(--color-accent) l c h / 18%), var(--shadow-sm); }
.jnode span, .jnode span::after { transition:border-color .35s ease, box-shadow .35s ease; }
@keyframes jpulse { 0%{ transform:scale(1); opacity:.55; } 70%{ transform:scale(1.55); opacity:0; } 100%{ opacity:0; } }
/* Stop 5 (Get rebated) and stop 6 (CPD) are ordinary rows: chart / stacked cards in the card column,
   the heading, figures and button in the copy column. */
.jcopy-wide { max-width:520px; }
/* Two buttons on one line (owner, 2026-09-13): the row never wraps on desktop; mobile inherits the
   shared wrapping .btn-row. */
@media (min-width:821px) { .jcopy .btn-row { flex-wrap:nowrap; } .jcopy .btn-row .btn { white-space:nowrap; } }
/* Every stop title is an h2 with one .hl word — the "Get rebated" treatment (owner, 2026-09-13). */
.jcopy h2 { margin:0 0 var(--space-xs); line-height:var(--line-tight); }
.jcopy h2 + p { margin-top:0; }
.jcopy h2 .hl { color:var(--color-primary); }
.jcopy .money-lede { margin-top:var(--space-2xs); }
.jcopy .money-figs { margin:var(--space-m) 0; }
.jstep:nth-child(even) .jcopy .money-figs, .jstep:nth-child(even) .jcopy .btn-row { justify-content:flex-end; }
.jcard .barchart { width:100%; max-width:440px; margin:0; }
@media (prefers-reduced-motion: reduce) { .journey-line .float-dot, .jnode span::after { animation:none; display:none; } }
@media (prefers-reduced-motion: reduce) { .flow-card .ap-a, .flow-card .ap-caret { animation:none; } }
@media (max-width:820px) {
  .jstep { grid-template-columns:56px minmax(0,1fr); column-gap:var(--space-m); }
  .jstep:nth-child(odd) .jnode, .jstep:nth-child(even) .jnode { order:1; align-self:start; }
  .jstep:nth-child(odd) .jcard, .jstep:nth-child(even) .jcard { order:2; justify-content:flex-start; grid-column:2; }
  .jstep:nth-child(odd) .jcopy, .jstep:nth-child(even) .jcopy { order:3; grid-column:2; text-align:left; justify-self:start; margin-top:var(--space-s); }
  .jnode span { width:40px; height:40px; font-size:16px; }
  .jcopy-wide { max-width:none; }
  .jstep:nth-child(even) .jcopy .money-figs, .jstep:nth-child(even) .jcopy .btn-row { justify-content:flex-start; }
}

/* The allied-health calculator as a stop's card. */
.jcard .calc { width:100%; max-width:440px; margin:0; }

/* In-page jump link under a stop ("How referrals follow ↓"). */
.roles-jump { font-weight:var(--weight-semibold); color:var(--color-primary); text-decoration:none; }
.roles-jump:hover { text-decoration:underline; }