/* A Charity Marketing-ábra a főoldalon (cm-chart.jsx). Tinta panel a csont
   lapon — a mélység értékkontrasztból. Az arany a tintán a világos változat. */
.cmx{--cmx-gold:#C6A868;--cmx-ink:var(--ink-900);--cmx-bone:var(--bone-200);margin-top:clamp(28px,4vw,52px);padding:clamp(22px,3.6vw,48px) clamp(18px,3.4vw,44px) clamp(10px,2vw,24px);background:var(--cmx-ink);color:var(--cmx-bone);position:relative}
.cmx:before,.cmx:after{content:"";position:absolute;top:-1px;width:14px;height:14px;border-top:1px solid var(--cmx-gold);pointer-events:none}
.cmx:before{left:-1px;border-left:1px solid var(--cmx-gold)}.cmx:after{right:-1px;border-right:1px solid var(--cmx-gold)}
.cmx-rule{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;padding-bottom:12px;margin-bottom:clamp(18px,2.6vw,30px);border-bottom:1px solid color-mix(in srgb,var(--cmx-gold) 50%,transparent);font-family:var(--font-sans);font-weight:500;font-size:10.5px;letter-spacing:.24em;color:color-mix(in srgb,var(--cmx-bone) 70%,transparent)}
.cmx-note{color:color-mix(in srgb,var(--cmx-bone) 50%,transparent)}
.cmx-end{margin-left:auto}
.cmx-row{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(0,2fr) minmax(0,5.7fr);gap:clamp(14px,2vw,28px);align-items:start;padding-bottom:clamp(18px,2.4vw,28px)}
.cmx-name{display:flex;flex-direction:column;gap:6px}
.cmx-n{font-family:var(--font-sans);font-size:10.5px;letter-spacing:.24em;color:color-mix(in srgb,var(--cmx-bone) 50%,transparent)}
.cmx-name h4{margin:0;font-family:var(--font-display);font-weight:300;font-size:clamp(1.35rem,2.3vw,1.9rem);line-height:1.08;color:var(--bone-100)}
.cmx-row.gold .cmx-name h4{font-style:italic;color:var(--cmx-gold)}
.cmx-who{font-family:var(--font-sans);font-weight:500;font-size:10.5px;letter-spacing:.22em;color:var(--cmx-gold);opacity:0;transition:opacity .8s var(--ease-out) .15s}
.cmx-role{opacity:.14;transition:opacity .8s var(--ease-out)}
.cmx-role svg{display:block;width:100%;max-width:260px;height:auto;overflow:visible}
.cmx-row.on .cmx-who,.cmx-row.on .cmx-role{opacity:1}
.cmx-role .goal{fill:color-mix(in srgb,var(--cmx-bone) 12%,transparent);stroke:var(--cmx-bone);stroke-width:1.5}
.cmx-role text{font-family:var(--font-sans);text-anchor:middle}
.cmx-role .gl{font-weight:500;font-size:17px;letter-spacing:.16em;fill:var(--bone-100)}
.cmx-role .gs{font-size:13px;letter-spacing:.24em;fill:var(--cmx-gold)}
.cmx-role .al{font-size:13px;letter-spacing:.22em;fill:color-mix(in srgb,var(--cmx-bone) 70%,transparent)}
.cmx-role .p{fill:var(--cmx-bone)}.cmx-role .p.g{fill:var(--cmx-gold)}
.cmx-role .aim{fill:none;stroke:color-mix(in srgb,var(--cmx-bone) 55%,transparent);stroke-width:1}
.cmx-role .ar{fill:none;stroke:var(--cmx-bone);stroke-width:1.5}
.cmx-role .ln{fill:none;stroke:color-mix(in srgb,var(--cmx-bone) 45%,transparent);stroke-width:1}
.cmx-role .ring{fill:color-mix(in srgb,var(--cmx-gold) 9%,transparent);stroke:color-mix(in srgb,var(--cmx-gold) 55%,transparent);stroke-width:1}
.cmx-role .sp{stroke:color-mix(in srgb,var(--cmx-gold) 50%,transparent);stroke-width:1}
.cmx-role .tool{fill:var(--cmx-ink);stroke:var(--cmx-bone);stroke-width:1.5}
.cmx-role .tl{font-weight:500;font-size:12px;letter-spacing:.14em;fill:var(--bone-100)}
.cmx-bar{display:flex;min-height:clamp(46px,5vw,64px);border:1px solid color-mix(in srgb,var(--cmx-bone) 30%,transparent)}
.cmx-seg{position:relative;display:flex;align-items:center;min-width:0;overflow-wrap:anywhere;padding:6px clamp(6px,.9vw,12px);border-right:1px solid color-mix(in srgb,var(--cmx-ink) 80%,transparent);overflow:hidden;transition:background .8s var(--ease-out),color .8s ease}
.cmx-seg:last-child{border-right:0}
.cmx-seg span{font-family:var(--font-sans);font-weight:500;font-size:clamp(9px,1vw,11.5px);line-height:1.2;letter-spacing:.1em;text-transform:uppercase;hyphens:manual;opacity:0;transition:opacity .9s ease}
.cmx-seg span em{font-style:normal;white-space:pre-wrap;opacity:0;transition:opacity .8s ease .5s}
.cmx-seg span em.on{opacity:1}
.cmx-row.on .cmx-seg span{opacity:1}
.cmx-row.on .cmx-seg.prod{background:color-mix(in srgb,var(--cmx-bone) 22%,transparent);color:var(--bone-100)}
.cmx-row.on .cmx-seg.ext{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--cmx-bone) 16%,transparent) 0 2px,transparent 2px 10px);color:color-mix(in srgb,var(--cmx-bone) 82%,transparent)}
.cmx-row.on .cmx-seg.pro{background:var(--cmx-bone);color:var(--cmx-ink)}
.cmx-row.on .cmx-seg.net{background:color-mix(in srgb,var(--cmx-gold) 42%,var(--cmx-ink));color:var(--bone-100)}
.cmx-row.on .cmx-seg.com{background:var(--cmx-gold);color:var(--cmx-ink)}
.cmx-seg.pro.mv span{white-space:nowrap}
.cmx-seg.mv{transition:width 1.5s var(--ease-out),background 1.1s var(--ease-out),color 1.1s ease}
.cmx-seg.com.mv:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--bone-100) 55%,transparent) 50%,transparent);transform:translateX(120%);pointer-events:none}
.cmx-row.close .cmx-seg.com.mv:after{animation:cmxFlow 1.5s var(--ease-out) .05s both}
@keyframes cmxFlow{from{transform:translateX(120%);opacity:1}to{transform:translateX(-120%);opacity:0}}
.cmx-cap{margin:12px 0 0;font-family:var(--font-sans);font-weight:300;font-size:clamp(.92rem,1.3vw,1.02rem);line-height:1.5;color:color-mix(in srgb,var(--cmx-bone) 86%,transparent);text-wrap:pretty;opacity:0;transition:opacity .8s var(--ease-out)}
.cmx-row.on .cmx-cap{opacity:1}
/* A sáv 1180px alatt saját, teljes szélességű sort kap — keskenyebb sávban a
   feliratok három sorra törtek, és a sáv szétesett. */
@media (max-width:1180px){.cmx-row{grid-template-columns:minmax(0,1fr) minmax(0,190px);row-gap:14px}.cmx-track{grid-column:1/-1}.cmx-role svg{max-width:190px;margin-left:auto}}
@media (max-width:600px){.cmx-row{grid-template-columns:minmax(0,1fr) minmax(0,120px)}.cmx-role svg{max-width:120px}.cmx-seg{padding:5px 4px}.cmx-seg span{font-size:8.5px;letter-spacing:.05em}.cmx-bar{min-height:52px}}
@media (prefers-reduced-motion:reduce){.cmx *{transition:none!important;animation:none!important}}