/* ══════════════════════════════════════════════════════════════════════════
   comfort.css — COMFORT™ Score methodology page (/comfort-score/)
   Enqueued only on that page from functions.php. Prefix .cmx-

   House rules: no glow, square controls / 20px cards, transform+opacity
   motion, ambient loops ≥9s, reduced-motion collapses to a truthful static
   frame, mocks are fictional data. Reveal classes come free from nga.js via
   the structural classes used in the markup (.cap-split>*, .dfeat-visual,
   .center, .step). Every displayed VALUE is static — animation never drives
   a number.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── D1 hero mock: COMFORT reading sentences live ──────────────────────── */
.cmx-hero{font-family:'Inter',sans-serif;color:#e2e4eb;display:grid;gap:13px}
.cmx-ent{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--zinc-200)}
.cmx-ent b{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.cmx-ent i{display:block;font-style:normal;font-size:10.5px;font-weight:600;color:var(--zinc-500);margin-top:2px}
.cmx-scorechip{display:flex;align-items:center;gap:8px}
.cmx-scorechip b{font-size:26px;font-weight:200;letter-spacing:-.03em;color:var(--blue)}
.cmx-scorechip span{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--zinc-400);text-align:right;line-height:1.35}
.cmx-move{font-size:10.5px;font-weight:700;color:var(--red-600);background:var(--red-050);border:1px solid rgba(193,73,83,.25);border-radius:3px;padding:3px 7px;white-space:nowrap}

.cmx-feed{display:grid;gap:9px}
.cmx-sent{position:relative;border:1px solid var(--zinc-200);border-radius:3px;padding:11px 13px;background:var(--paper)}
.cmx-sent:before{content:'';position:absolute;inset:-1px;border:1px solid var(--blue-300);background:var(--blue-050);border-radius:3px;opacity:0}
.cmx-sent>*{position:relative;z-index:1}
.cmx-src{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.cmx-src i{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--zinc-400)}
.cmx-tag{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:3px;padding:3px 7px;white-space:nowrap}
.cmx-tag-r{color:var(--red-600);background:var(--red-050);border:1px solid rgba(193,73,83,.25)}
.cmx-tag-n{color:var(--zinc-500);background:#121828;border:1px solid var(--zinc-200)}
.cmx-tag-g{color:#2f8f5b;background:#12201a;border:1px solid rgba(47,143,91,.3)}
.cmx-sent p{font-family:'Cabin',sans-serif;font-size:13.5px;line-height:1.55;color:var(--zinc-700);margin:0}
.cmx-sent p mark{background:rgba(193,73,83,.14);color:inherit;padding:1px 3px;border-radius:2px}
.cmx-sent p mark.cmx-g{background:rgba(47,143,91,.14)}
.cmx-foot{font-size:10.5px;font-weight:600;color:var(--zinc-400);text-align:center;padding-top:2px}

/* ambient: COMFORT "reads" each sentence in turn — overlay only, 12s loop */
@media(prefers-reduced-motion:no-preference){
  .cmx-sent:before{animation:cmxRead 12s linear infinite}
  .cmx-sent:nth-child(2):before{animation-delay:4s}
  .cmx-sent:nth-child(3):before{animation-delay:8s}
}
@keyframes cmxRead{0%{opacity:0}4%{opacity:1}26%{opacity:1}32%{opacity:0}100%{opacity:0}}

/* ── D2 comparison: keyword matching vs COMFORT reading ────────────────── */
.cmx-cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-width:0}
.cmx-col{background:var(--paper);border:1px solid var(--zinc-200);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.cmx-col-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 15px;border-bottom:1px solid var(--zinc-200);background:var(--blue-050)}
.cmx-col-h b{font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.cmx-col-old .cmx-col-h{background:#121828}
.cmx-col-old .cmx-col-h b{color:var(--zinc-500)}
.cmx-col-b{padding:14px 15px;display:grid;gap:10px;flex:1;align-content:start}
.cmx-art{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:700;color:var(--ink);padding-bottom:8px;border-bottom:1px solid var(--zinc-200)}
.cmx-art i{display:block;font-style:normal;font-size:9.5px;font-weight:600;color:var(--zinc-400);margin-top:3px}
.cmx-line{display:grid;gap:5px}
.cmx-line p{font-family:'Cabin',sans-serif;font-size:12.5px;line-height:1.5;color:var(--zinc-600);margin:0;border-radius:2px}
.cmx-line p mark{background:rgba(193,73,83,.14);color:inherit;padding:1px 3px;border-radius:2px}
.cmx-line p mark.cmx-g{background:rgba(47,143,91,.14)}
.cmx-line .cmx-tag{justify-self:start}
/* keyword side: everything painted the same */
.cmx-col-old .cmx-line p{background:rgba(193,73,83,.09)}
.cmx-verdict{margin-top:auto;border-top:1px solid var(--zinc-200);padding:11px 15px;font-family:'Cabin',sans-serif;font-size:12.5px;line-height:1.5;color:var(--zinc-500)}
.cmx-verdict b{font-family:'Inter',sans-serif;font-size:12px;color:var(--ink)}
/* COMFORT side: sentence-level highlights fade in when revealed */
@media(prefers-reduced-motion:no-preference){
  .cap-split>*.reveal .cmx-line p mark{opacity:0;transition:opacity .6s cubic-bezier(.22,1,.36,1)}
  .cap-split>*.reveal .cmx-line .cmx-tag{opacity:0;transform:translateY(4px);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
  .cap-split>*.reveal.in-view .cmx-line p mark,
  .cap-split>*.reveal.in-view .cmx-line .cmx-tag{opacity:1;transform:none}
  .cap-split>*.reveal.in-view .cmx-line:nth-child(2) p mark,
  .cap-split>*.reveal.in-view .cmx-line:nth-child(2) .cmx-tag{transition-delay:.35s}
  .cap-split>*.reveal.in-view .cmx-line:nth-child(3) p mark,
  .cap-split>*.reveal.in-view .cmx-line:nth-child(3) .cmx-tag{transition-delay:.7s}
  .cap-split>*.reveal.in-view .cmx-line:nth-child(4) p mark,
  .cap-split>*.reveal.in-view .cmx-line:nth-child(4) .cmx-tag{transition-delay:1.05s}
}

/* ── D3 three signals feeding one score ─────────────────────────────────── */
.cmx-fac{display:grid;gap:0;min-width:0}
.cmx-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cmx-tile{background:var(--paper);border:1px solid var(--zinc-200);border-radius:var(--radius);padding:18px 16px 16px;display:grid;gap:10px;align-content:start}
.cmx-tile-h{display:flex;align-items:center;gap:9px}
.cmx-tile-h .catg-ico{margin:0}
.cmx-tile b{font-family:'Inter',sans-serif;font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.cmx-tile p{font-family:'Cabin',sans-serif;font-size:13px;line-height:1.55;color:var(--zinc-500);margin:0}
/* mini-visualisations */
.cmx-viz{display:flex;align-items:flex-end;gap:5px;height:30px}
.cmx-viz-dots{align-items:center}
.cmx-viz-dots i{width:9px;height:9px;border-radius:2px;background:var(--blue-050);border:1px solid rgba(175,60,69,.2)}
.cmx-viz-dots i.on{background:var(--blue);border-color:var(--blue)}
.cmx-viz-bars i{width:12px;border-radius:2px 2px 0 0;background:var(--blue)}
.cmx-viz-bars i:nth-child(1){height:30%;background:#c9a227}
.cmx-viz-bars i:nth-child(2){height:62%;background:#d98324}
.cmx-viz-bars i:nth-child(3){height:100%;background:var(--red)}
.cmx-viz-src{align-items:center;gap:7px}
.cmx-viz-src span{font-family:'Inter',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--blue);background:var(--blue-050);border:1px solid rgba(175,60,69,.2);border-radius:3px;padding:4px 8px}
.cmx-viz-src span.lo{color:var(--zinc-400);background:#121828;border-color:var(--zinc-200)}
/* connector down to the score chip */
.cmx-join{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:34px}
.cmx-join i{position:relative}
.cmx-join i:before{content:'';position:absolute;left:50%;top:6px;bottom:6px;width:2px;background:var(--zinc-200)}
.cmx-one{justify-self:center;display:flex;align-items:center;gap:12px;background:var(--blue);border-radius:3px;padding:13px 22px}
.cmx-one b{font-family:'Inter',sans-serif;font-size:24px;font-weight:200;letter-spacing:-.03em;color:#fff}
.cmx-one span{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75);line-height:1.4}
@media(prefers-reduced-motion:no-preference){
  .cmx-tile .catg-ico{animation:cmxPulse 10s cubic-bezier(.22,1,.36,1) infinite}
  .cmx-tiles .cmx-tile:nth-child(2) .catg-ico{animation-delay:3.3s}
  .cmx-tiles .cmx-tile:nth-child(3) .catg-ico{animation-delay:6.6s}
}
@keyframes cmxPulse{0%,100%{transform:none}3%{transform:scale(1.09)}6%{transform:none}}

/* ── D4 anatomy of a score (inside .app-frame on the dark df-c split) ───── */
.cmx-anat{font-family:'Inter',sans-serif;color:#e2e4eb;display:grid;gap:15px}
.cmx-anat-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--zinc-200)}
.cmx-ring{--p:72;position:relative;width:96px;height:96px;border-radius:50%;background:conic-gradient(from -90deg,var(--blue) calc(var(--p)*1%),rgba(175,60,69,.1) 0)}
.cmx-ring:after{content:'';position:absolute;inset:9px;border-radius:50%;background:var(--paper);border:1px solid var(--zinc-200)}
.cmx-ring span{position:absolute;inset:0;display:grid;place-content:center;text-align:center;z-index:1}
.cmx-ring b{font-size:25px;font-weight:200;letter-spacing:-.03em;color:var(--ink);line-height:1}
.cmx-ring i{font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--zinc-400);margin-top:3px}
.cmx-metrics{display:grid;gap:7px;min-width:0}
.cmx-met{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--zinc-200);border-radius:3px;padding:8px 11px}
.cmx-met span{font-family:'Cabin',sans-serif;font-size:12.5px;color:var(--zinc-600)}
.cmx-met b{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.cmx-met b.up{color:var(--red-600)}
.cmx-cats{display:grid;gap:8px}
.cmx-cat{display:grid;grid-template-columns:128px minmax(0,1fr) 30px;align-items:center;gap:10px}
.cmx-cat span{font-size:10.5px;font-weight:600;color:var(--zinc-500);letter-spacing:.02em}
.cmx-track{height:8px;border-radius:4px;background:rgba(175,60,69,.08);overflow:hidden}
.cmx-track i{display:block;height:100%;border-radius:4px;transform-origin:left center}
.cmx-cat b{font-size:11.5px;font-weight:700;color:var(--ink);text-align:right}
.cmx-anat .cmx-foot{border-top:1px solid var(--zinc-200);padding-top:10px}
/* bars grow when the visual column reveals — width is static truth, scaleX is the motion */
@media(prefers-reduced-motion:no-preference){
  .dfeat-visual.reveal .cmx-track i{transform:scaleX(0);transition:transform .9s cubic-bezier(.22,1,.36,1)}
  .dfeat-visual.reveal.in-view .cmx-track i{transform:scaleX(1)}
  .dfeat-visual.reveal.in-view .cmx-cat:nth-child(2) .cmx-track i{transition-delay:.12s}
  .dfeat-visual.reveal.in-view .cmx-cat:nth-child(3) .cmx-track i{transition-delay:.24s}
  .dfeat-visual.reveal.in-view .cmx-cat:nth-child(4) .cmx-track i{transition-delay:.36s}
  .dfeat-visual.reveal.in-view .cmx-cat:nth-child(5) .cmx-track i{transition-delay:.48s}
}

/* ── D5 source-to-decision chain (uses .step cards for free reveal) ─────── */
.cmx-chain{position:relative}
.cmx-chain .step{position:relative}
.cmx-chain .step:after{
  content:'';position:absolute;top:50%;right:-19px;width:12px;height:12px;
  border-top:2px solid var(--blue-300);border-right:2px solid var(--blue-300);
  transform:translateY(-50%) rotate(45deg);
}
.cmx-chain .step:last-child:after{display:none}
.cmx-chain .step-n{color:var(--blue-300)}
@media(max-width:900px){
  .cmx-chain .step:after{
    top:auto;right:auto;bottom:-19px;left:50%;
    transform:translateX(-50%) rotate(135deg);
  }
}

/* ── fine-print proof row (matches the homepage meter's) ────────────────── */
.cmx-proof{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:26px}
.cmx-proof span{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:rgba(255,255,255,.72)}
.cmx-proof b{color:#fff;font-weight:700}
.cmx-proof span+span{border-left:1px solid rgba(255,255,255,.2);padding-left:26px}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media(max-width:700px){
  .cmx-cmp{grid-template-columns:minmax(0,1fr)}
  .cmx-tiles{grid-template-columns:minmax(0,1fr)}
  .cmx-join{grid-template-columns:minmax(0,1fr)}
  .cmx-join i:nth-child(1),.cmx-join i:nth-child(3){display:none}
  .cmx-anat-top{grid-template-columns:minmax(0,1fr);justify-items:start}
  .cmx-cat{grid-template-columns:96px minmax(0,1fr) 28px}
  .cmx-proof{gap:12px}
  .cmx-proof span+span{border-left:0;padding-left:0}
}


/* ══ CMX HUB v2 2026-08-20 — the circle is the focus ═════════════════════
   Replaces the pipe + anatomy sections with one hub-and-spoke centrepiece:
   evidence cards flow INTO a large 0-100 ring, derived metrics flow OUT.
   Ring values are static; only connector dots and opacity animate. */

/* hero mini ring (replaces the plain score chip) */
.cmx-minihead{display:flex;align-items:center;gap:9px}
.cmx-minring{--p:72;--rc:var(--red);position:relative;width:62px;aspect-ratio:1;flex:none;border-radius:50%;background:conic-gradient(from -90deg,var(--rc) calc(var(--p)*1%),rgba(24,24,27,.1) 0)}
.cmx-minring:after{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--paper);border:1px solid var(--zinc-200)}
.cmx-minring span{position:absolute;inset:0;z-index:1;display:grid;place-content:center;text-align:center;line-height:1}
.cmx-minring b{font-family:'Inter',sans-serif;font-size:17px;font-weight:300;letter-spacing:-.02em;color:var(--ink)}
.cmx-minring i{font-style:normal;font-family:'Inter',sans-serif;font-size:8px;font-weight:700;color:var(--zinc-400);margin-top:2px;display:block}

/* the hub */
.cmx-hub{--cgap:clamp(34px,4.5vw,72px);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--cgap);align-items:center}
.cmx-in,.cmx-outs{display:grid;gap:14px;min-width:0}
.cmx-io{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:14px 17px}
.cmx-iohead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cmx-io b{display:block;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:700;color:#fff;margin-bottom:4px}
.cmx-io .cmx-iohead b{margin-bottom:0}
.cmx-io span{display:block;font-family:'Cabin',sans-serif;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.62)}
.cmx-iohead i{font-style:normal;font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:#d97b88;white-space:nowrap}
.cmx-iohead i.up{color:#e08a92}
.cmx-iohead+span{margin-top:4px}
.cmx-mini{display:grid;gap:4px;margin-top:9px}
.cmx-mini i{display:block;height:4px;border-radius:2px;background:#d97b88;opacity:.65}

/* connector lines into / out of the ring */
.cmx-in .cmx-io:after,.cmx-outs .cmx-io:after{content:'';position:absolute;top:50%;height:2px;width:var(--cgap);background:rgba(255,255,255,.13)}
.cmx-in .cmx-io:after{right:calc(-1 * var(--cgap))}
.cmx-outs .cmx-io:after{left:calc(-1 * var(--cgap))}

/* the big ring */
.cmx-ringwrap{display:grid;justify-items:center;gap:0}
.cmx-bigring{--p:72;--rc:var(--red);position:relative;width:clamp(210px,22vw,262px);aspect-ratio:1;border-radius:50%;background:conic-gradient(from -90deg,var(--rc) calc(var(--p)*1%),rgba(255,255,255,.13) 0)}
.cmx-bigring:after{content:'';position:absolute;inset:15px;border-radius:50%;background:var(--paper)}
.cmx-bigring>span{position:absolute;inset:0;z-index:1;display:grid;place-content:center;text-align:center}
.cmx-bigring b{font-family:'Inter',sans-serif;font-size:clamp(56px,6vw,72px);font-weight:200;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.cmx-bigring i{font-style:normal;font-family:'Inter',sans-serif;font-size:16px;font-weight:700;color:var(--zinc-400);display:block;margin-top:4px}
.cmx-bigring em{font-style:normal;font-family:'Inter',sans-serif;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rc,var(--red));display:block;margin-top:9px}

/* dots travelling along the connectors */
@media(prefers-reduced-motion:no-preference){
  .cmx-in .cmx-io:before,.cmx-outs .cmx-io:before{content:'';position:absolute;top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:#d97b88;opacity:0;animation:cmxFlow 9s linear infinite}
  .cmx-in .cmx-io:before{left:100%}
  .cmx-outs .cmx-io:before{left:calc(-1 * var(--cgap))}
  .cmx-in .cmx-io:nth-child(2):before{animation-delay:3s}
  .cmx-in .cmx-io:nth-child(3):before{animation-delay:6s}
  .cmx-outs .cmx-io:nth-child(1):before{animation-delay:1.5s}
  .cmx-outs .cmx-io:nth-child(2):before{animation-delay:3.8s}
  .cmx-outs .cmx-io:nth-child(3):before{animation-delay:6.1s}
  .cmx-outs .cmx-io:nth-child(4):before{animation-delay:8.2s}
  .cmx-bigring{animation:cmxBreathe 9s cubic-bezier(.45,0,.55,1) infinite}
}
@keyframes cmxFlow{0%{transform:translateX(0);opacity:0}6%{opacity:1}38%{transform:translateX(calc(var(--cgap) - 6px));opacity:1}46%,100%{transform:translateX(calc(var(--cgap) - 6px));opacity:0}}
@keyframes cmxBreathe{0%,100%{transform:none}50%{transform:scale(1.015)}}

/* signals endpoint: circle instead of the rectangle */
.cmx-onering{justify-self:center;position:relative;width:138px;aspect-ratio:1;border-radius:50%;border:11px solid var(--blue);background:var(--paper);display:grid;place-content:center;text-align:center}
.cmx-onering b{font-family:'Inter',sans-serif;font-size:22px;font-weight:300;letter-spacing:-.02em;color:var(--ink);line-height:1}
.cmx-onering em{font-style:normal;font-family:'Inter',sans-serif;font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--zinc-400);display:block;margin-top:6px;line-height:1.5}

@media(max-width:900px){
  .cmx-hub{grid-template-columns:minmax(0,1fr);justify-items:stretch;gap:26px}
  .cmx-ringwrap{order:-1;margin-bottom:6px}
  .cmx-in .cmx-io:before,.cmx-in .cmx-io:after,
  .cmx-outs .cmx-io:before,.cmx-outs .cmx-io:after{display:none}
}

/* ══ CMX v3 2026-08-20 — signal mock, audit trail, product badges ═════════ */

/* signal-weighting mock (replaces the three floating tiles) */
.cmx-sig{font-family:'Inter',sans-serif;color:#e2e4eb;display:grid;gap:13px}
.cmx-sig-ent{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:11px;border-bottom:1px solid var(--zinc-200)}
.cmx-sig-ent b{font-size:14.5px;font-weight:800;color:var(--ink)}
.cmx-sig-ent i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--zinc-400);white-space:nowrap}
.cmx-sig-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:14px;align-items:center;border:1px solid var(--zinc-200);border-radius:3px;padding:12px 14px}
.cmx-sig-row b{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink)}
.cmx-sig-row b .catg-ico{margin:0;width:30px;height:30px}
.cmx-sig-row b .catg-ico svg{width:16px;height:16px}
.cmx-sig-lvl{display:grid;gap:6px;min-width:0}
.cmx-sig-lvl .cmx-track{height:7px}
.cmx-sig-lvl .cmx-tag{justify-self:start}
.cmx-sig-out{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--zinc-200);padding-top:13px}
.cmx-sig-out span{font-family:'Cabin',sans-serif;font-size:13.5px;line-height:1.5;color:var(--zinc-600);max-width:30ch}
.cmx-sig-out .cmx-minring{width:74px}
.cmx-sig-out .cmx-minring b{font-size:20px}
/* rows + bars build in when the visual column reveals */
@media(prefers-reduced-motion:no-preference){
  .cap-split>*.reveal .cmx-sig-row .cmx-track i{transform:scaleX(0);transition:transform .9s cubic-bezier(.22,1,.36,1)}
  .cap-split>*.reveal.in-view .cmx-sig-row .cmx-track i{transform:scaleX(1)}
  .cap-split>*.reveal.in-view .cmx-sig-row:nth-child(3) .cmx-track i{transition-delay:.15s}
  .cap-split>*.reveal.in-view .cmx-sig-row:nth-child(4) .cmx-track i{transition-delay:.3s}
}

/* audit trail: four circle nodes on a track, a dot walks source -> decision */
.cmx-trail{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;padding-top:8px}
.cmx-trail-line{position:absolute;top:29px;left:calc(12.5% - 6px);right:calc(12.5% - 6px);height:2px;background:rgba(175,60,69,.16)}
.cmx-trail-dot{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:0}
.cmx-stop{text-align:center;padding:0 6px}
.cmx-node{position:relative;z-index:1;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--paper);border:2px solid var(--accent);font-family:'Inter',sans-serif;font-size:12.5px;font-weight:800;color:var(--accent);margin-bottom:14px}
.cmx-stop h3{font-family:'Inter',sans-serif;font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin:0 0 7px}
.cmx-stop p{font-family:'Cabin',sans-serif;font-size:14px;line-height:1.6;color:var(--zinc-600);margin:0}
@media(prefers-reduced-motion:no-preference){
  .cmx-trail-dot{animation:cmxWalk 12s cubic-bezier(.45,0,.55,1) infinite}
  .center.reveal .cmx-stop{opacity:1}
  .center.reveal~.cmx-trail .cmx-stop{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
  .center.reveal.in-view~.cmx-trail .cmx-stop{opacity:1;transform:none}
  .center.reveal.in-view~.cmx-trail .cmx-stop:nth-child(3){transition-delay:.15s}
  .center.reveal.in-view~.cmx-trail .cmx-stop:nth-child(4){transition-delay:.3s}
  .center.reveal.in-view~.cmx-trail .cmx-stop:nth-child(5){transition-delay:.45s}
}
@keyframes cmxWalk{0%{left:0;opacity:0}4%{opacity:1}44%{left:calc(100% - 8px);opacity:1}52%,100%{left:calc(100% - 8px);opacity:0}}
@media(max-width:900px){
  .cmx-trail{grid-template-columns:minmax(0,1fr);gap:26px}
  .cmx-trail-line{display:none}
  .cmx-stop{text-align:left;display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 16px}
  .cmx-node{margin-bottom:0}
  .cmx-stop h3{grid-column:2;align-self:center}
  .cmx-stop p{grid-column:2}
}

/* product cards: the SAME red 72/100 badge on all four */
.cmx-pring{--p:72;position:relative;display:block;width:46px;aspect-ratio:1;border-radius:50%;background:conic-gradient(from -90deg,var(--accent) calc(var(--p)*1%),rgba(255,255,255,.16) 0);margin-bottom:14px}
.cmx-pring:after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--paper)}
.cmx-pring span{position:absolute;inset:0;z-index:1;display:grid;place-content:center;text-align:center;line-height:1}
.cmx-pring b{font-family:'Inter',sans-serif;font-size:13px;font-weight:400;letter-spacing:-.02em;color:var(--ink)}
.cmx-pring i{font-style:normal;font-family:'Inter',sans-serif;font-size:6.5px;font-weight:700;color:var(--zinc-400);display:block;margin-top:1px}

/* ══ CMX RADIAL 2026-08-20 — "where it runs" as one core, four spokes ═══════ */
.cmx-radial{--cgap:clamp(44px,5vw,84px);display:grid;grid-template-columns:minmax(0,1fr) clamp(190px,20vw,230px) minmax(0,1fr);grid-template-rows:auto auto;gap:30px var(--cgap);align-items:center}
.cmx-core{grid-column:2;grid-row:1/3;justify-self:center;position:relative;width:clamp(180px,19vw,214px);aspect-ratio:1}
.cmx-core-ring{position:absolute;inset:0;border-radius:50%;border:12px solid var(--accent);background:var(--paper);display:grid;place-content:center;text-align:center;z-index:1}
.cmx-core-ring em{font-style:normal;font-family:'Inter',sans-serif;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.cmx-core-ring b{font-family:'Inter',sans-serif;font-size:34px;font-weight:200;letter-spacing:-.03em;color:var(--ink);line-height:1.1;margin-top:4px}
.cmx-core-ring i{font-style:normal;font-family:'Inter',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--zinc-400);margin-top:5px}
.cmx-ripple{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(196,81,91,.55);opacity:0;pointer-events:none}

.cmx-prod{position:relative;display:block;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:22px 22px 20px;text-decoration:none;transition:border-color .25s,transform .25s}
.cmx-prod:hover{border-color:rgba(217,123,136,.45);transform:translateY(-4px)}
.cmx-p1{grid-column:1;grid-row:1}
.cmx-p2{grid-column:3;grid-row:1}
.cmx-p3{grid-column:1;grid-row:2}
.cmx-p4{grid-column:3;grid-row:2}
.cmx-prod-ico{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:rgba(213,111,124,.14);border:1px solid rgba(217,123,136,.32);color:#d97b88;margin-bottom:14px}
.cmx-prod-ico svg{width:22px;height:22px}
.cmx-prod h3{font-family:'Inter',sans-serif;font-size:16.5px;font-weight:700;color:#fff;margin:0 0 8px}
.cmx-prod p{font-family:'Cabin',sans-serif;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.62);margin:0}
.cmx-prod .step-go{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:700;color:var(--blue-300);transition:gap .2s}
.cmx-prod:hover .step-go{gap:11px}

/* spoke lines toward the core */
.cmx-p1:after,.cmx-p3:after{content:'';position:absolute;top:50%;right:calc(-1*var(--cgap));width:var(--cgap);height:2px;background:rgba(255,255,255,.13)}
.cmx-p2:after,.cmx-p4:after{content:'';position:absolute;top:50%;left:calc(-1*var(--cgap));width:var(--cgap);height:2px;background:rgba(255,255,255,.13)}

@media(prefers-reduced-motion:no-preference){
  .cmx-ripple{animation:cmxRip 9s ease-out infinite}
  .cmx-ripple.r2{animation-delay:4.5s}
  /* dots leave the core and arrive at each product, staggered */
  .cmx-p2:before,.cmx-p4:before{content:'';position:absolute;top:calc(50% - 3px);left:calc(-1*var(--cgap));width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:0;animation:cmxFlow 9s linear infinite}
  .cmx-p1:before,.cmx-p3:before{content:'';position:absolute;top:calc(50% - 3px);left:calc(100% + var(--cgap) - 6px);width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:0;animation:cmxFlowL 9s linear infinite}
  .cmx-p2:before{animation-delay:2.2s}
  .cmx-p3:before{animation-delay:4.4s}
  .cmx-p4:before{animation-delay:6.6s}
  /* cards cascade in with the section header */
  .center.reveal~.cmx-radial .cmx-prod{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
  .center.reveal~.cmx-radial .cmx-core{opacity:0;transform:scale(.9);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
  .center.reveal.in-view~.cmx-radial .cmx-prod,
  .center.reveal.in-view~.cmx-radial .cmx-core{opacity:1;transform:none}
  .center.reveal.in-view~.cmx-radial .cmx-p2{transition-delay:.12s}
  .center.reveal.in-view~.cmx-radial .cmx-p3{transition-delay:.24s}
  .center.reveal.in-view~.cmx-radial .cmx-p4{transition-delay:.36s}
}
@keyframes cmxRip{0%{transform:scale(.72);opacity:.55}50%{transform:scale(1.6);opacity:0}100%{transform:scale(1.6);opacity:0}}
@keyframes cmxFlowL{0%{transform:translateX(0);opacity:0}6%{opacity:1}38%{transform:translateX(calc(-1*(var(--cgap) - 6px)));opacity:1}46%,100%{transform:translateX(calc(-1*(var(--cgap) - 6px)));opacity:0}}

@media(max-width:900px){
  .cmx-radial{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:16px}
  .cmx-core{grid-column:1;grid-row:auto;margin:0 auto 14px}
  .cmx-p1,.cmx-p2,.cmx-p3,.cmx-p4{grid-column:1;grid-row:auto}
  .cmx-p1:after,.cmx-p2:after,.cmx-p3:after,.cmx-p4:after,
  .cmx-p1:before,.cmx-p2:before,.cmx-p3:before,.cmx-p4:before{display:none}
}

/* ── risk-band badges 2026-08-20 (user: vary the scores; badge the bands) ── */
.cmx-tag-a{color:#8a6510;background:#241c10;border:1px solid rgba(201,162,39,.32)}
.cmx-ringwrap .cmx-tag{margin-top:16px;font-size:11px;padding:5px 12px}
.cmx-sig-ring{display:grid;justify-items:center;gap:9px}

/* ══ CMX AMBIENT 2026-08-20 — the remaining diagrams get life ═════════════
   Comparison: only the COMFORT column keeps "reading" (the article-level
   side stays static on purpose — that IS the contrast). Signal rows: the
   icon pulse. All inside reduced-motion, overlay/transform only. */
.cmx-col:not(.cmx-col-old) .cmx-line{position:relative}
.cmx-col:not(.cmx-col-old) .cmx-line:before{content:'';position:absolute;inset:-5px -8px;border-radius:3px;background:var(--blue-050);border:1px solid rgba(213,111,124,.5);opacity:0;pointer-events:none}
.cmx-col:not(.cmx-col-old) .cmx-line>*{position:relative;z-index:1}
@media(prefers-reduced-motion:no-preference){
  .cmx-col:not(.cmx-col-old) .cmx-line:before{animation:cmxRead 12s linear infinite}
  .cmx-col:not(.cmx-col-old) .cmx-line:nth-of-type(3):before{animation-delay:4s}
  .cmx-col:not(.cmx-col-old) .cmx-line:nth-of-type(4):before{animation-delay:8s}
  .cmx-sig-row .catg-ico{animation:cmxPulse 10s cubic-bezier(.22,1,.36,1) infinite}
  .cmx-sig .cmx-sig-row:nth-of-type(3) .catg-ico{animation-delay:3.3s}
  .cmx-sig .cmx-sig-row:nth-of-type(4) .catg-ico{animation-delay:6.6s}
}

/* ============================================================
   CMX T11 ADDITIONS (2026-08-31) — KYCopilot content alignment:
   score-breakdown "story" section (.cmx-brk, light passage) and
   before/after comparison (.cmx-vs, dark). Flat, no glow.
   ============================================================ */
.cmx-tag-v{color:#d97b88;background:rgba(213,111,124,.1);border:1px solid rgba(213,111,124,.3)}

/* story checklist + quote (light .lite context) */
.cmx-story-list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.cmx-story-list li{position:relative;padding-left:27px;font-family:'Cabin',sans-serif;font-size:15px;line-height:1.6;color:var(--zinc-600)}
.cmx-story-list li::before{content:'\2713';position:absolute;left:0;top:3px;width:17px;height:17px;border-radius:50%;background:#c4515b;color:#fff;font-size:9px;line-height:17px;text-align:center;font-family:'Inter',sans-serif;font-weight:700}
.cmx-quote{margin:24px 0 0;padding:2px 0 2px 16px;border-left:3px solid rgba(196,81,91,.5);font-family:'Cabin',sans-serif;font-style:italic;font-size:15.5px;line-height:1.65;color:var(--zinc-600)}

/* score-breakdown document panel (dark panel on the light passage) */
.cmx-brk{background:#0d121f;border:1px solid rgba(175,60,69,.32);border-radius:3px;padding:20px}
.cmx-brk-head{display:flex;justify-content:space-between;align-items:center;gap:14px;background:rgba(213,111,124,.08);border:1px solid rgba(213,111,124,.18);border-radius:3px;padding:13px 16px;margin-bottom:14px}
.cmx-brk-head b{display:block;font-family:'Inter',sans-serif;font-weight:800;font-size:14px;color:#fff;letter-spacing:-.01em}
.cmx-brk-head i{display:block;font-style:normal;font-family:'Cabin',sans-serif;font-size:11px;color:#8b8e94;margin-top:3px}
.cmx-brk-score{text-align:right;flex:none;background:rgba(193,73,83,.1);border:1px solid rgba(193,73,83,.28);border-radius:3px;padding:8px 12px}
.cmx-brk-score b{display:block;font-family:'Inter',sans-serif;font-weight:800;font-size:26px;line-height:1;color:#C14953}
.cmx-brk-score span{display:block;font-family:'Inter',sans-serif;font-size:8px;font-weight:800;letter-spacing:.08em;color:#C14953;margin-top:3px}
.cmx-brk-cap{display:block;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8b8e94;margin:0 0 4px}
.cmx-brk-row{padding:12px 0;border-top:1px solid rgba(255,255,255,.07)}
.cmx-brk-row:first-of-type{border-top:0}
.cmx-brk-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:7px}
.cmx-brk-top b{font-family:'Inter',sans-serif;font-weight:700;font-size:12.5px;color:#edeff4}
.cmx-brk-bar{height:3px;border-radius:2px;background:rgba(255,255,255,.07);margin:0 0 8px;overflow:hidden}
.cmx-brk-bar i{display:block;height:100%}
.cmx-brk-row p{font-family:'Cabin',sans-serif;font-size:11.5px;line-height:1.6;color:#8b8e94;margin:0}
.cmx-brk-foot{display:block;margin-top:10px;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:9px;letter-spacing:.08em;color:#8d93a0}

/* before/after ruled comparison (dark) */
.cmx-vs{border:1px solid rgba(255,255,255,.1);border-radius:3px;overflow:hidden;max-width:1080px;margin:0 auto}
.cmx-vs-head{display:grid;grid-template-columns:1fr 1fr;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.1)}
.cmx-vs-head span{padding:14px 22px;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.cmx-vs-head span:first-child{color:rgba(231,233,237,.55);border-right:1px solid rgba(255,255,255,.1)}
.cmx-vs-head span:last-child{color:#d97b88}
.cmx-vs-row{display:grid;grid-template-columns:1fr 1fr}
.cmx-vs-row+.cmx-vs-row{border-top:1px solid rgba(255,255,255,.06)}
.cmx-vs-row>div{padding:16px 22px 16px 46px;font-family:'Cabin',sans-serif;font-size:14px;line-height:1.6;position:relative;min-width:0}
.cmx-vs-old{color:rgba(231,233,237,.55);border-right:1px solid rgba(255,255,255,.1)}
.cmx-vs-old::before{content:'\00d7';position:absolute;left:23px;top:15px;color:#C14953;font-family:'Inter',sans-serif;font-weight:700;font-size:14px}
.cmx-vs-new{color:rgba(231,233,237,.88)}
.cmx-vs-new::before{content:'\2713';position:absolute;left:22px;top:16px;color:#d56f7c;font-family:'Inter',sans-serif;font-weight:700;font-size:12px}
.cmx-vs-k{display:none}
@media(max-width:760px){
  .cmx-vs-head{display:none}
  .cmx-vs-row{grid-template-columns:1fr}
  .cmx-vs-old{border-right:0}
  .cmx-vs-new{border-top:1px dashed rgba(255,255,255,.08)}
  .cmx-vs-k{display:block;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px}
  .cmx-vs-old .cmx-vs-k{color:rgba(231,233,237,.4)}
  .cmx-vs-new .cmx-vs-k{color:#d97b88}
}