/* ==========================================================================
   The Care Web mark in parts (v88.9.0), drawn by assets/careweb-mark.js.

   The paint follows the two logo pictures: white with the gold person on the dark look,
   navy dots and hands with silver lines on the light look, in high contrast and on paper.
   Lit parts use --cm-lit (gold), done parts --cm-ok (the step bar's done green).

   Also here: the first-page intro, the Find workers loader, the care web on My preferred
   workers and the Get started progress. The Seven kinds of support on the home page are
   in home-kinds.css. Every moving part stops with reduced motion.
   ========================================================================== */

.cm {
  display: block; width: 100%; height: auto; overflow: visible;
  --cm-line: #FFFFFF; --cm-dot: #FFFFFF; --cm-hand: #FFFFFF; --cm-person: #EEBB4D;
  --cm-lit: #F7D27A; --cm-ok: var(--cn-ok, #6FCF97); --cm-seat: rgba(244, 239, 228, .55);
}
@media (prefers-color-scheme: light) {
  html[data-look="cinema"]:not([data-cn-theme="dark"]) .cm {
    --cm-line: var(--cm-silver, #B4B9C0); --cm-dot: #1D3060; --cm-hand: #1D3060; --cm-lit: #C98F12; --cm-seat: rgba(29, 48, 96, .5);
  }
}
html[data-look="cinema"][data-cn-theme="light"] .cm, html.high-contrast .cm {
  --cm-line: var(--cm-silver, #B4B9C0); --cm-dot: #1D3060; --cm-hand: #1D3060; --cm-lit: #C98F12; --cm-seat: rgba(29, 48, 96, .5);
}
@media print {
  .cm { --cm-line: var(--cm-silver, #B4B9C0); --cm-dot: #1D3060; --cm-hand: #1D3060; --cm-lit: #C98F12; }
}
.cm .cm-ln { fill: none; stroke: var(--cm-line); stroke-width: 16.3px; }
.cm .cm-lt { fill: none; stroke: var(--cm-lit); stroke-width: 16.3px; stroke-dasharray: 100 200; stroke-dashoffset: 100; }
.cm .cm-nd { fill: var(--cm-dot); }
.cm .cm-hd { fill: var(--cm-hand); }
.cm .cm-hp-head, .cm .cm-hp-body { fill: var(--cm-person); }
.cm .cm-gl { opacity: 0; }
.cm .cm-rp { fill: none; stroke: var(--cm-lit); stroke-width: 6px; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* ---------- the header logo, while a page lights it ---------- */
.cm-brand { display: none; }
@media screen {
  html.cm-brand-live header.site .cw-brand > img.cw-brand-symbol { display: none !important; }
  html.cm-brand-live header.site .cw-brand > .cm-brand { display: block; flex: none; width: 48px; }
}
@media screen and (max-width: 600px) { html.cm-brand-live header.site .cw-brand > .cm-brand { width: 38px; } }
@media screen and (max-width: 374px) { html.cm-brand-live header.site .cw-brand > .cm-brand { width: 32px; } }
.cm-brand .cm .cm-lt, .cm-brand .cm .cm-nd, .cm-brand .cm .cm-hd { transition: stroke-dashoffset .5s ease, fill .4s ease; }

/* ---------- #1: the intro on the first page ---------- */
/* before the script runs: the page is covered, and uncovers itself after 4 seconds if the
   script never comes */
html.cm-intro::after {
  content: ""; position: fixed; inset: 0; z-index: 2147483000; background: var(--cn-bg, #0C1130); pointer-events: none;
  animation: cm-cover-bail .35s ease 4s forwards;
}
html.cm-intro-live::after { content: none; }
@keyframes cm-cover-bail { to { opacity: 0; visibility: hidden; } }
.cm-intro-layer {
  position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: var(--cn-bg, #0C1130); transition: background-color .5s ease, opacity .22s ease;
}
.cm-intro-layer.is-revealing { background-color: transparent; }
.cm-intro-layer.is-leaving { opacity: 0; }
.cm-intro-layer.no-glide.is-revealing .cm-intro-fly { opacity: 0; transition: opacity .4s ease; }
.cm-intro-glow {
  position: absolute; left: 50%; top: 50%; width: min(96vmin, 920px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cn-gold, #F1BE48) 15%, transparent), color-mix(in srgb, var(--cn-gold, #F1BE48) 4%, transparent) 55%, transparent);
  opacity: 0; pointer-events: none;
}
.cm-intro-fly { position: relative; width: min(46vmin, 440px); aspect-ratio: 795 / 777; transform-origin: 0 0; }
.cm-intro-mark { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.cm-intro-mark .cm-ln { opacity: .1; }
.cm-intro-mark .cm-nd { opacity: .12; }
.cm-intro-mark .cm-hds { opacity: .1; transform: translateY(16px); }
.cm-intro-mark .cm-hp { opacity: .12; }
.cm-intro-mark .cm-rp-head { stroke: var(--cn-gold, #F1BE48); }
.is-playing .cm-intro-glow { animation: cm-i-glow 2.4s ease both; }
.is-playing .cm-intro-mark { animation: cm-i-in .3s ease both; }
.is-playing .cm-intro-mark .cm-nd-top { animation: cm-i-on .18s ease .25s both; }
.is-playing .cm-intro-mark .cm-nd-ul, .is-playing .cm-intro-mark .cm-nd-ur { animation: cm-i-on .18s ease .62s both; }
.is-playing .cm-intro-mark .cm-nd-ll, .is-playing .cm-intro-mark .cm-nd-lr { animation: cm-i-on .18s ease .88s both; }
.is-playing .cm-intro-mark .cm-gl-top { animation: cm-i-dot-glow 1.5s ease .25s both; }
.is-playing .cm-intro-mark .cm-gl-ul, .is-playing .cm-intro-mark .cm-gl-ur { animation: cm-i-dot-glow 1.3s ease .62s both; }
.is-playing .cm-intro-mark .cm-gl-ll, .is-playing .cm-intro-mark .cm-gl-lr { animation: cm-i-dot-glow 1.1s ease .88s both; }
.is-playing .cm-intro-mark .cm-rp-top { animation: cm-i-rip .9s cubic-bezier(.22, 1, .36, 1) .25s forwards; }
.is-playing .cm-intro-mark .cm-rp-ul, .is-playing .cm-intro-mark .cm-rp-ur { animation: cm-i-rip .9s cubic-bezier(.22, 1, .36, 1) .62s forwards; }
.is-playing .cm-intro-mark .cm-rp-ll, .is-playing .cm-intro-mark .cm-rp-lr { animation: cm-i-rip .9s cubic-bezier(.22, 1, .36, 1) .88s forwards; }
.is-playing .cm-intro-mark .cm-hp { animation: cm-i-on-p .25s ease 1.18s both; }
.is-playing .cm-intro-mark .cm-gl-head { animation: cm-i-head-glow 1.5s ease 1.18s both; }
.is-playing .cm-intro-mark .cm-rp-head { animation: cm-i-rip 1s cubic-bezier(.22, 1, .36, 1) 1.18s forwards; }
.is-playing .cm-intro-mark .cm-hds { animation: cm-i-hands .45s cubic-bezier(.22, 1, .36, 1) 1.3s both; }
.is-playing .cm-intro-mark .cm-ln { animation: cm-i-ln .4s ease 1.45s both; }
/* the lines draw out from each dot as it lights, in gold, then the gold cools to the logo's own colour */
.is-playing .cm-intro-mark .cm-lt { animation-name: cm-i-draw, cm-i-cool; animation-timing-function: cubic-bezier(.45, 0, .55, 1), ease; animation-fill-mode: both, forwards; }
.is-playing .cm-intro-mark :is(.cm-lt-top-ul, .cm-lt-top-ur) { animation-duration: .35s, .4s; animation-delay: .3s, 1.5s; }
.is-playing .cm-intro-mark .cm-lt-top-head { animation-duration: .37s, .4s; animation-delay: .31s, 1.5s; }
.is-playing .cm-intro-mark :is(.cm-lt-top-ll, .cm-lt-top-lr) { animation-duration: .57s, .4s; animation-delay: .31s, 1.5s; }
.is-playing .cm-intro-mark :is(.cm-lt-ul-ur-a, .cm-lt-ul-ur-b) { animation-duration: .22s, .4s; animation-delay: .65s, 1.5s; }
.is-playing .cm-intro-mark :is(.cm-lt-ul-ll, .cm-lt-ur-lr) { animation-duration: .23s, .4s; animation-delay: .65s, 1.5s; }
.is-playing .cm-intro-mark :is(.cm-lt-ul-head, .cm-lt-ur-head) { animation-duration: .34s, .4s; animation-delay: .68s, 1.5s; }
.is-playing .cm-intro-mark :is(.cm-lt-ul-base, .cm-lt-ur-base) { animation-duration: .56s, .4s; animation-delay: .71s, 1.5s; }
.is-playing .cm-intro-mark :is(.cm-lt-ll-head, .cm-lt-lr-head) { animation-duration: .25s, .4s; animation-delay: .93s, 1.5s; }
.is-playing .cm-intro-mark :is(.cm-lt-ll-base, .cm-lt-lr-base) { animation-duration: .28s, .4s; animation-delay: .93s, 1.5s; }
@keyframes cm-i-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cm-i-on { from { opacity: .12; } to { opacity: 1; } }
@keyframes cm-i-on-p { from { opacity: .12; } to { opacity: 1; } }
@keyframes cm-i-ln { from { opacity: .1; } to { opacity: 1; } }
@keyframes cm-i-hands { from { opacity: .1; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cm-i-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes cm-i-cool { to { opacity: 0; } }
@keyframes cm-i-glow { 0% { opacity: 0; } 20% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cm-i-dot-glow { 0% { opacity: 0; } 15% { opacity: 1; } 55% { opacity: .5; } 100% { opacity: 0; } }
@keyframes cm-i-head-glow { 0% { opacity: 0; } 22% { opacity: 1; } 65% { opacity: .6; } 100% { opacity: 0; } }
@keyframes cm-i-rip { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(2.7); } }
/* as it lands on the header logo, the header and the first page come in */
html.cm-intro-reveal header.site { animation: cm-i-in .5s ease both; }
html.cm-intro-reveal .cn-journey .jr-static > * { animation: cm-i-rise .6s cubic-bezier(.22, 1, .36, 1) both; }
html.cm-intro-reveal .cn-journey .jr-static > :nth-child(2) { animation-delay: .07s; }
html.cm-intro-reveal .cn-journey .jr-static > :nth-child(3) { animation-delay: .14s; }
html.cm-intro-reveal .cn-journey .jr-static > :nth-child(4) { animation-delay: .21s; }
@keyframes cm-i-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cm-intro-skip {
  position: fixed; right: max(16px, 2.2vw); bottom: max(16px, 3.2vh); z-index: 2147483001; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--cn-ink, #F4EFE4) 12%, transparent); color: var(--cn-ink-2, #C3C0D2);
  font: 700 var(--cn-fs-small, .9375rem) / 1 var(--cn-body, system-ui, sans-serif); cursor: pointer; animation: cm-i-in .3s ease .3s both;
}
.cm-intro-skip:hover { color: var(--cn-ink, #F4EFE4); background: color-mix(in srgb, var(--cn-ink, #F4EFE4) 20%, transparent); }
.cm-intro-skip:focus-visible { outline: 3px solid var(--cn-focus, #F7D27A); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html.cm-intro::after { content: none; }
  .cm-intro-layer, .cm-intro-skip { display: none; }
}

/* ---------- #6: Find workers, while the list loads ---------- */
.cm-scan { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 36px 16px 52px; text-align: center; transition: opacity .22s ease; }
.cm-scan.is-leaving { opacity: 0; }
.cm-scan-mark { width: 150px; }
.cm-scan-say { margin: 0; display: grid; gap: 4px; }
.cm-scan-say b { font-family: var(--cn-display, Georgia, serif); font-weight: 560; font-size: 1.6rem; line-height: 1.15; color: var(--sk-ink, var(--cn-ink, #10173A)); }
.cm-scan-say span { font-size: 1rem; color: var(--sk-ink-2, var(--cn-ink-2, #3F4668)); }
.cm-scan-hide { display: none !important; }
.cm-scan-in { animation: cm-scan-in .5s ease both; }
@keyframes cm-scan-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cm-scan-mini { display: inline-block; width: 22px; margin-right: 8px; vertical-align: middle; }
.cm-scan-art .cm-ln { opacity: .22; transition: opacity .5s ease; }
.cm-scan-art .cm-hd { opacity: .3; transition: fill .4s ease, opacity .4s ease; }
.cm-scan-art .cm-nd { opacity: .35; animation: cm-scan-dot 1.5s ease-in-out infinite; }
.cm-scan-art .cm-gl { animation: cm-scan-glow 1.5s ease-in-out infinite; }
.cm-scan-art :is(.cm-nd-ul, .cm-gl-ul) { animation-delay: .25s; }
.cm-scan-art :is(.cm-nd-top, .cm-gl-top) { animation-delay: .5s; }
.cm-scan-art :is(.cm-nd-ur, .cm-gl-ur) { animation-delay: .75s; }
.cm-scan-art :is(.cm-nd-lr, .cm-gl-lr) { animation-delay: 1s; }
.cm-scan-art .cm-gl-head { animation: none; }
.cm-scan-art .cm-hp { animation: cm-scan-breathe 1.5s ease-in-out infinite alternate; }
.cm-scan-art .cm-lt { transition: stroke-dashoffset .55s cubic-bezier(.22, 1, .36, 1); }
@keyframes cm-scan-dot { 0% { fill: var(--cm-dot); opacity: .35; } 8% { fill: var(--cm-lit); opacity: 1; } 34% { fill: var(--cm-dot); opacity: .35; } 100% { fill: var(--cm-dot); opacity: .35; } }
@keyframes cm-scan-glow { 0% { opacity: 0; } 8% { opacity: 1; } 38% { opacity: 0; } 100% { opacity: 0; } }
@keyframes cm-scan-breathe { from { opacity: .45; } to { opacity: .85; } }
/* found: everything lights at once */
.is-done .cm-scan-art .cm-nd { animation: none; fill: var(--cm-lit); opacity: 1; }
.is-done .cm-scan-art .cm-gl { animation: none; opacity: .7; transition: opacity .3s ease; }
.is-done .cm-scan-art .cm-gl-head { opacity: 1; }
.is-done .cm-scan-art .cm-hp { animation: none; opacity: 1; }
.is-done .cm-scan-art .cm-hd { fill: var(--cm-lit); opacity: 1; }
.is-done .cm-scan-art .cm-ln { opacity: .5; }
.is-done .cm-scan-art .cm-lt { stroke-dashoffset: 0; }
.is-done .cm-scan-art .cm-rp-head { stroke: var(--cm-lit); animation: cm-i-rip 1.1s cubic-bezier(.22, 1, .36, 1) forwards; }

/* ---------- C: the care web on My preferred workers ---------- */
.cw-web { margin: 10px 0 4px; display: grid; justify-items: center; gap: 10px; }
.cw-web-art { position: relative; width: min(100% - 48px, 250px); aspect-ratio: 795 / 777; margin: 22px 24px 6px; }
.cw-web-art > .cm { position: absolute; inset: 0; width: 100%; height: 100%; }
.cw-web-mark .cm-ln { opacity: .42; }
.cw-web-mark .cm-nd { fill: none; stroke: var(--cm-seat); stroke-width: 5px; stroke-dasharray: 9 9; }
.cw-web-mark .cm-hd { opacity: .5; }
.cw-web-mark .cm-gl-head { opacity: .55; }
.cw-web-mark .cm-lt { transition: stroke-dashoffset .6s ease; }
.cw-web-mark.cw-auto-ll .cm-lt-ll-head, .cw-web-mark.cw-auto-ul .cm-lt-ul-head, .cw-web-mark.cw-auto-top .cm-lt-top-head,
.cw-web-mark.cw-auto-ur .cm-lt-ur-head, .cw-web-mark.cw-auto-lr .cm-lt-lr-head,
.cw-web-mark.cw-j1 .cm-lt-ll-ul, .cw-web-mark.cw-j2 .cm-lt-ul-top, .cw-web-mark.cw-j3 .cm-lt-top-ur, .cw-web-mark.cw-j4 .cm-lt-ur-lr { stroke-dashoffset: 0; }
.cw-web-mark :is(.cm-lt-ll-ul, .cm-lt-ul-top, .cm-lt-top-ur, .cm-lt-ur-lr) { opacity: .55; }
.cw-seat { position: absolute; width: 0; height: 0; }
/* initials at 19px bold count as large text, so a worker's colour only needs 3:1 against white */
.cw-seat .cw-face, .cw-item .cw-face { font-size: 19px; }
.cw-seat .cw-face {
  position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; flex: none;
  box-shadow: 0 0 0 3px var(--sk-surface, #FFFFFF), 0 0 0 5px var(--cm-seat-ring, #F1BE48); transition: opacity .2s ease;
}
.cw-seat-n {
  position: absolute; left: 9px; top: 7px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 999px;
  display: grid; place-items: center; background: #F1BE48; color: #1A1400; font-size: 11px; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 2px var(--sk-surface, #FFFFFF);
}
.cw-seat.is-off .cw-face { filter: grayscale(1); opacity: .55; box-shadow: 0 0 0 3px var(--sk-surface, #FFFFFF), 0 0 0 5px var(--sk-line-2, #C9BFAE); }
.cw-seat.is-off .cw-seat-n { background: var(--sk-line-2, #C9BFAE); color: var(--sk-ink, #10173A); }
.cw-web figcaption { max-width: 34em; font-size: .88rem; line-height: 1.5; text-align: center; color: var(--sk-ink-2, var(--text-soft, #4A5270)); }
.cw-web figcaption b { color: var(--sk-ink, var(--text, #10173A)); }
.cw-web-key { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; font-size: .82rem; }
.cw-web-key i { display: inline-block; width: 22px; height: 4px; border-radius: 2px; background: #F1BE48; }
/* beside the calendar the card is 380px wide: the controls go under the name, so the name is not squeezed */
.bk-aside .cw-item { flex-wrap: wrap; row-gap: 8px; }
.bk-aside .cw-body { flex: 1 1 110px; }
.bk-aside .cw-role { margin-left: auto; }
/* the first time the card shows in a visit: the people take their places in order */
.cw-web.is-new .cw-seat:not(.is-empty) { animation: cw-pop .45s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(.15s + var(--i) * .16s); }
.cw-web.is-new .cw-web-mark .cm-lt { transition: none; }
.cw-web.is-new .cw-web-mark.cw-auto-ll .cm-lt-ll-head { animation: cw-draw .5s ease .35s both; }
.cw-web.is-new .cw-web-mark.cw-auto-ul .cm-lt-ul-head { animation: cw-draw .5s ease .51s both; }
.cw-web.is-new .cw-web-mark.cw-auto-top .cm-lt-top-head { animation: cw-draw .5s ease .67s both; }
.cw-web.is-new .cw-web-mark.cw-auto-ur .cm-lt-ur-head { animation: cw-draw .5s ease .83s both; }
.cw-web.is-new .cw-web-mark.cw-auto-lr .cm-lt-lr-head { animation: cw-draw .5s ease .99s both; }
@keyframes cw-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes cw-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
/* someone added: they fly from their button into their place, then their line draws */
.cw-fly { position: fixed; z-index: 9999; pointer-events: none; will-change: transform; }
.cw-fly .cw-face { width: 100% !important; height: 100% !important; flex: none; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .45); }
.cw-seat.is-landing .cw-face, .cw-seat.is-landing .cw-seat-n { opacity: 0; }
.cw-seat.is-landed .cw-face { animation: cw-land .6s ease; }
@keyframes cw-land { 0% { box-shadow: 0 0 0 3px var(--sk-surface, #FFFFFF), 0 0 0 5px #F1BE48, 0 0 0 5px rgba(241, 190, 72, .6); } 100% { box-shadow: 0 0 0 3px var(--sk-surface, #FFFFFF), 0 0 0 5px #F1BE48, 0 0 0 22px rgba(241, 190, 72, 0); } }
.cw-web-mark.cw-new-ll .cm-lt-ll-head, .cw-web-mark.cw-new-ul .cm-lt-ul-head, .cw-web-mark.cw-new-top .cm-lt-top-head,
.cw-web-mark.cw-new-ur .cm-lt-ur-head, .cw-web-mark.cw-new-lr .cm-lt-lr-head { animation: cw-draw .6s ease .8s both; }
/* no flight (the place was off the screen): the line draws as the person takes their place */
.cw-web-mark.cw-new-now :is(.cm-lt-ll-head, .cm-lt-ul-head, .cm-lt-top-head, .cm-lt-ur-head, .cm-lt-lr-head) { animation-delay: .15s; }

/* ---------- #4: the Get started steps ---------- */
.stp-progress { justify-items: center; text-align: center; gap: 8px; }
.stp-progress .k { justify-self: start; }
.stp-pk { width: 176px; margin: 4px auto 2px; }
.stp-pmini { display: none; }
/* Your progress stays in view while you work down a step. The side column used to stick as a
   whole, so on a short step the end of the form pushed it (and the logo) off the screen. Now
   the column runs the height of the step and only the panel sticks, in a wrapper painted in the
   page colour, so the cards below it slide under it and never show in the gap under the
   header. Steps without the panel (the worker steps) keep the old sticky column. */
.stp-pstick { display: grid; }
@container page (min-width: 901px) {
  .stp-grid > .stp-side:has(> .stp-pstick) { position: static; align-self: stretch; align-content: start; }
  .stp-side > .stp-pstick { position: sticky; top: var(--cn-header-h, 76px); z-index: 2; margin-top: -18px; padding-top: 18px; background: var(--cn-bg); }
  .stp-pstick > .stp-progress { box-shadow: inset 0 0 0 1px var(--cn-line), var(--cn-shadow-md, 0 18px 40px -24px rgba(16, 23, 58, .35)); }
  /* anything focusable in the cards below never ends up hidden under the panel */
  .stp-side:focus-within > .stp-pstick { position: static; }
}
@container page (max-width: 820px) {
  .stp-progress, .stp-pstick { display: none; }
  /* v88.13.0 (P19): a 36px logo at the start of the one-line step bar (cinema.css), beside "Step 1 of 7" */
  .stp-pmini { display: block; flex: none; width: 36px; }
}
.cm-pk .cm-ln { opacity: .24; transition: opacity .6s ease, stroke .6s ease; }
.cm-pk .cm-nd { opacity: .3; transition: fill .5s ease, opacity .5s ease; }
.cm-pk .cm-hd { opacity: .28; transition: fill .6s ease, opacity .6s ease; }
.cm-pk .cm-hp { opacity: .38; transition: opacity .6s ease; }
.cm-pk .cm-gl { transition: opacity .6s ease; }
.cm-pk .cm-rp { stroke: var(--cm-lit); stroke-width: 7px; }
.cm-pk .cm-lt { stroke: var(--cm-ok); transition: stroke-dashoffset .9s cubic-bezier(.45, 0, .55, 1), stroke .6s ease; }
.cm-pk.pk-ll-done .cm-nd-ll, .cm-pk.pk-ul-done .cm-nd-ul, .cm-pk.pk-top-done .cm-nd-top, .cm-pk.pk-ur-done .cm-nd-ur, .cm-pk.pk-lr-done .cm-nd-lr { fill: var(--cm-ok); opacity: 1; }
.cm-pk.pk-ll-done .cm-gl-ll, .cm-pk.pk-ul-done .cm-gl-ul, .cm-pk.pk-top-done .cm-gl-top, .cm-pk.pk-ur-done .cm-gl-ur, .cm-pk.pk-lr-done .cm-gl-lr { opacity: .5; }
.cm-pk.pk-ll-done .cm-lt-ll-head, .cm-pk.pk-ul-done .cm-lt-ul-head, .cm-pk.pk-top-done .cm-lt-top-head, .cm-pk.pk-ur-done .cm-lt-ur-head, .cm-pk.pk-lr-done .cm-lt-lr-head { stroke-dashoffset: 0; }
.cm-pk.pk-ll-cur .cm-nd-ll, .cm-pk.pk-ul-cur .cm-nd-ul, .cm-pk.pk-top-cur .cm-nd-top, .cm-pk.pk-ur-cur .cm-nd-ur, .cm-pk.pk-lr-cur .cm-nd-lr { fill: var(--cn-gold, #F1BE48); opacity: 1; }
.cm-pk.pk-ll-cur .cm-gl-ll, .cm-pk.pk-ul-cur .cm-gl-ul, .cm-pk.pk-top-cur .cm-gl-top, .cm-pk.pk-ur-cur .cm-gl-ur, .cm-pk.pk-lr-cur .cm-gl-lr { fill: var(--cm-g-lit); animation: cm-pk-breathe 1.5s ease-in-out infinite alternate; }
.cm-pk.pk-hands-done .cm-hd { fill: var(--cm-ok); opacity: 1; }
.cm-pk.pk-hands-done :is(.cm-gl-hl, .cm-gl-hr) { opacity: .4; }
.cm-pk.pk-hands-cur .cm-hd { fill: var(--cn-gold, #F1BE48); animation: cm-pk-hands 1.5s ease-in-out infinite alternate; }
.cm-pk.pk-hands-cur :is(.cm-gl-hl, .cm-gl-hr) { fill: var(--cm-g-lit); animation: cm-pk-breathe 1.5s ease-in-out infinite alternate; }
.cm-pk.pk-person-done .cm-hp, .cm-pk.pk-person-cur .cm-hp { opacity: 1; }
.cm-pk.pk-person-done .cm-gl-head { opacity: .55; }
.cm-pk.pk-person-cur .cm-gl-head { fill: var(--cm-g-lit); animation: cm-pk-breathe 1.5s ease-in-out infinite alternate; }
.cm-pk.pk-top-done.pk-ul-done .cm-lt-top-ul, .cm-pk.pk-top-done.pk-ur-done .cm-lt-top-ur, .cm-pk.pk-top-done.pk-ll-done .cm-lt-top-ll,
.cm-pk.pk-top-done.pk-lr-done .cm-lt-top-lr, .cm-pk.pk-ul-done.pk-ur-done .cm-lt-ul-ur, .cm-pk.pk-ul-done.pk-ll-done .cm-lt-ul-ll,
.cm-pk.pk-ur-done.pk-lr-done .cm-lt-ur-lr, .cm-pk.pk-ul-done.pk-hands-done .cm-lt-ul-base, .cm-pk.pk-ur-done.pk-hands-done .cm-lt-ur-base,
.cm-pk.pk-ll-done.pk-hands-done .cm-lt-ll-base, .cm-pk.pk-lr-done.pk-hands-done .cm-lt-lr-base { stroke-dashoffset: 0; }
/* all seven: the whole logo lights up */
.cm-pk.pk-all .cm-ln { stroke: var(--cm-lit); opacity: 1; }
.cm-pk.pk-all .cm-nd { fill: var(--cm-lit); opacity: 1; }
.cm-pk.pk-all .cm-hd { fill: var(--cm-lit); opacity: 1; animation: none; }
.cm-pk.pk-all .cm-hp { opacity: 1; }
.cm-pk.pk-all .cm-lt { stroke: var(--cm-lit); stroke-dashoffset: 0; }
.cm-pk.pk-all .cm-gl { fill: var(--cm-g-lit); opacity: .7; animation: none; }
.cm-pk.pk-all .cm-gl-head { opacity: 1; }
.cm-pk.pk-all .cm-rp-head { animation: cm-pk-rip 1.6s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes cm-pk-breathe { from { opacity: .25; } to { opacity: 1; } }
@keyframes cm-pk-hands { from { opacity: .55; } to { opacity: 1; } }
@keyframes cm-pk-rip { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }

/* ---------- reduced motion: everything shows its state, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .cm *, .cw-web *, .cw-fly, .cm-scan, .cm-scan-in, .cm-brand * { animation: none !important; transition: none !important; }
  .cw-fly { display: none; }
}