.mess-demo{padding:30px 4% 90px;padding-left:max(4%,calc((100vw - 1500px)/2));padding-right:max(4%,calc((100vw - 1500px)/2))}
.mess-stage{position:relative;border:1px solid #b9b1d0;border-radius:12px;overflow:hidden;background:#fff}
.mess-stage{overflow:visible}
.mess-stage[data-state=done]{background:#18191b;border-color:#18191b}

/* raw sheet */
.mess-raw{position:relative;height:520px;overflow:hidden;background:#fff;color:#222;border-radius:11px}
.mess-stage[data-state=done] .mess-raw,.mess-stage[data-state=done] .mess-loader,.mess-stage[data-state=done] .mess-cta{display:none}
.mess-filebar{display:flex;align-items:center;gap:10px;padding:9px 14px;background:#1e6f42;color:#fff;font-size:13px}
.mess-filebar b{font-weight:600}
.mess-filebar span{margin-left:auto;opacity:.85;font-variant-numeric:tabular-nums}
.mess-sheet{border-collapse:collapse;font:11px/1.25 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap}
.mess-sheet th{background:#e9ebee;color:#555;font-weight:500;border:1px solid #cfd2d6;padding:3px 8px;text-align:center}
.mess-sheet td{border:1px solid #e1e3e6;padding:3px 8px;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.mess-sheet tr:nth-child(2) td{font-weight:700}
.mess-sheet td.num{text-align:right}
.mess-raw:after{content:'';position:absolute;inset:auto 0 0 0;height:210px;background:linear-gradient(#fff0,#fff 78%);pointer-events:none}
.mess-scan{position:absolute;left:0;right:0;top:0;height:64px;background:linear-gradient(#d6fa4800,#d6fa4899);border-bottom:2px solid #9cc400;opacity:0;pointer-events:none}
.mess-stage[data-state=loading] .mess-scan{opacity:1;animation:mess-scan 1.5s linear infinite}
@keyframes mess-scan{from{transform:translateY(-64px)}to{transform:translateY(520px)}}
.mess-cta{position:absolute;left:0;right:0;bottom:34px;display:flex;flex-direction:column;align-items:center;gap:12px;z-index:2;text-align:center;padding:0 16px}
.mess-cta p{font-size:15px;color:#4f456a}
.mess-cta .button{cursor:pointer}
.mess-cta .button:hover{transform:translateY(-2px)}
.mess-stage[data-state=loading] .mess-cta{display:none}

/* loader: compact card, sheet stays visible behind it */
.mess-loader{position:absolute;inset:0;border-radius:12px;display:none;place-items:center;z-index:3;background:#25214514;padding:16px}
.mess-stage[data-state=loading] .mess-loader{display:grid}
.mess-loader-card{width:min(440px,100%);background:#252145f2;color:#fff;border-radius:14px;padding:26px 28px;box-shadow:0 24px 60px #25214566}
.mess-loader-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.mess-step{font-size:15px;color:#d9d3f0;min-height:1.5em}
.mess-pct{font:500 44px/1 'Space Grotesk',sans-serif;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.mess-bar{height:10px;border-radius:10px;background:#ffffff26;margin-top:18px;overflow:hidden}
.mess-bar i{display:block;height:100%;width:0;background:var(--lime,#d6fa48);border-radius:10px}
.mess-checks{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:5px;font-size:13px;color:#a9a2c4}
.mess-checks li:before{content:'○';display:inline-block;width:18px}
.mess-checks li.on{color:#fff}
.mess-checks li.on:before{content:'●';color:var(--lime,#d6fa48)}

/* dashboard */
.mess-dash{display:none;--s:#2a2b2e;--bd:#45464b;--t1:#fff;--t2:#c3c2b7;--grid:#3d3e43;--c1:#3987e5;color:var(--t1);font-family:'DM Sans',sans-serif;border-radius:12px;padding:12px}
.mess-stage[data-state=done] .mess-dash{display:block;animation:mess-in .6s ease both}
@keyframes mess-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.md-title{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:6px 8px 14px}
.md-title h3{font:600 clamp(22px,2.6vw,34px)/1.1 'Space Grotesk',sans-serif;letter-spacing:-.03em}
.md-title-actions{display:flex;gap:8px;flex-wrap:wrap}
.md-ghost{background:transparent;border:1px solid #5b5c62;color:#e7e6df;border-radius:40px;padding:8px 14px;font-size:13px}
.md-ghost:hover{border-color:#fff}
.md-body{display:grid;grid-template-columns:var(--slice,188px) minmax(0,1fr);gap:10px;align-items:start;transition:grid-template-columns .45s ease}
.md-body.hints{--slice:360px}
.md-slicers{display:grid;gap:10px;position:relative;z-index:5;width:188px;justify-self:end}
.md-slicer{position:relative;background:#f7f7f4;color:#1d1e20;border-radius:6px;padding:8px;border:1px solid #cfd0c9}
.md-slicer-head{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:13px;padding:0 2px 7px;border-bottom:1px solid #c9cac3;margin-bottom:7px;gap:6px}
.md-clear{border:0;background:transparent;font-size:12px;color:#8b1a1a;padding:2px 4px;border-radius:4px;visibility:hidden}
.md-slicer.filtered .md-clear{visibility:visible}
.md-items{display:grid;gap:4px}
.md-slicer[data-dim=month] .md-items{grid-template-columns:1fr 1fr}
.md-item{border:1px solid #9db8d6;background:#bdd7ee;color:#10243a;border-radius:4px;padding:6px 8px;font-size:13px;text-align:left;transition:background .15s,transform .1s}
.md-slicer[data-dim=year] .md-item{background:#c6e0b4;border-color:#a3c78a;color:#1d3310}
.md-item:hover{filter:brightness(.95)}
.md-item:active{transform:scale(.97)}
.md-item.off{background:#fff;border-color:#d7d8d2;color:#8a8b85}
.md-slicer[data-dim=year] .md-item.off{background:#fff;border-color:#d7d8d2;color:#8a8b85}

/* long red annotation arrows: outside the panels, flashing, vanish on first use */
.md-arrow{position:absolute;right:calc(100% - 10px);top:50%;transform:translateY(-50%);width:170px;z-index:6;display:block;border:0;padding:0;background:transparent;text-align:left;animation:md-flash 1.15s ease-in-out infinite}
.md-arrow small{display:block;font:700 12.5px/1.3 'Space Grotesk',sans-serif;color:#fff;letter-spacing:-.01em}
.md-arrow i{font-style:normal;font-weight:500;font-size:11.5px;color:#c3c2b7}
.md-arrow svg{display:block;width:100%;height:auto;margin-top:-1px;fill:#e3261f;stroke:#e3261f;filter:drop-shadow(0 4px 10px #e3261f4d)}
.md-arrow:hover svg{fill:#ff3b33;stroke:#ff3b33}
@keyframes md-flash{0%,100%{transform:translate(0,-50%);opacity:1}50%{transform:translate(-9px,-50%);opacity:.45}}
.md-arrow.gone{animation:md-gone .4s ease forwards;pointer-events:none}
@keyframes md-gone{to{opacity:0;transform:translate(34px,-50%) scale(.8);visibility:hidden}}

/* demo call-to-action buttons */
.mess-go,.feature-link.solid,.case-demo-link,.need-actions .button,#project-actions a.button[href^="demos/"]{background:#e3261f!important;border-color:#e3261f!important;color:#fff!important;animation:md-cta 1.7s ease-in-out infinite}
.mess-go:hover,.feature-link.solid:hover,.case-demo-link:hover,.need-actions .button:hover,#project-actions a.button[href^="demos/"]:hover{background:#ff3b33!important;border-color:#ff3b33!important}
@keyframes md-cta{0%,100%{box-shadow:0 0 0 0 #e3261f80}55%{box-shadow:0 0 0 12px #e3261f00}}
.demo-badge{background:#e3261f;color:#fff}
.mess-go{font:700 clamp(16px,1.55vw,19px)/1 'Space Grotesk',sans-serif!important;letter-spacing:-.01em;gap:14px!important;padding:20px 22px 20px 30px!important;border-radius:50px!important;background:linear-gradient(135deg,#e2ff6a,#b9e400)!important;color:#171915!important;animation:md-go 1.5s ease-in-out infinite!important}
.mess-go>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#1719151f;font-size:17px;font-weight:400}
.mess-go:hover{background:linear-gradient(135deg,#eaff85,#c8f200)!important}
@keyframes md-go{0%,100%{box-shadow:0 16px 36px #b9e4005c,inset 0 1px 0 #ffffff59,0 0 0 0 #d6fa488c}55%{box-shadow:0 16px 36px #b9e4005c,inset 0 1px 0 #ffffff59,0 0 0 18px #d6fa4800}}

/* spotlight: after 2s of dwell, blur everything above and below this section */
body header,body main>*{transition:filter .45s ease,opacity .45s ease}
body.md-spot header,body.md-spot main>*:not(#mess-demo){filter:blur(3px) saturate(.75);opacity:.5}

/* spotlight: after 2s of dwell, blur everything above and below this section */
.mess-go-row{display:flex;align-items:center;justify-content:center}
.mess-go-wrap{position:relative;display:inline-block}

.md-main{display:grid;gap:10px;min-width:0}
.md-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.md-kpi{background:var(--s);border:1px solid var(--bd);border-radius:8px;padding:12px 10px;text-align:center;min-width:0}
.md-kpi span{display:block;font-size:13px;color:var(--t2);font-weight:600}
.md-kpi b{display:block;font:600 clamp(20px,2.1vw,30px)/1.2 'Space Grotesk',sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:4px}
.md-kpi b small{font-size:.55em;font-weight:500;color:var(--t2);margin-left:4px}
.md-row{display:grid;gap:10px}
.md-row.r1{grid-template-columns:1.45fr 1fr 1fr}
.md-row.r2{grid-template-columns:1fr 1fr 1fr 1.25fr}
.md-panel{background:var(--s);border:1px solid var(--bd);border-radius:8px;padding:12px 12px 8px;min-width:0;position:relative}
.md-panel h4{margin:0 0 6px;font:600 14px 'DM Sans',sans-serif;color:var(--t1);text-align:center;letter-spacing:.02em}
.md-chart{width:100%;min-height:230px}
.md-chart svg{display:block;width:100%;overflow:visible}
.md-chart text{font:11px 'DM Sans',sans-serif;fill:var(--t2)}
.md-chart text.v{fill:var(--t1);font-weight:600}
.md-chart .g{stroke:var(--grid);stroke-width:1}
.md-chart .bar{fill:var(--c1);transform-box:fill-box;transform-origin:50% 100%;animation:md-grow .5s cubic-bezier(.2,.8,.2,1) both}
.md-chart .bar.neg{transform-origin:50% 0}
.md-chart .hbar{fill:var(--c1);transform-box:fill-box;transform-origin:0 50%;animation:md-growx .5s cubic-bezier(.2,.8,.2,1) both}
.md-chart .hit{fill:transparent}
.md-chart .hit:hover+.mark,.md-chart .mark:hover{filter:brightness(1.25)}
.md-chart .line{fill:none;stroke:var(--c1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:md-draw .8s ease-out forwards}
.md-chart .area{fill:var(--c1);opacity:.1}
.md-chart .dot{fill:var(--c1);stroke:var(--s);stroke-width:2}
.md-chart .slice{stroke:var(--s);stroke-width:2;animation:md-fade .5s both}
.md-chart .tile{stroke:var(--s);stroke-width:2;animation:md-fade .5s both}
.md-chart .tile-t{font-size:9px;font-weight:600;pointer-events:none}
@keyframes md-grow{from{transform:scaleY(0)}to{transform:none}}
@keyframes md-growx{from{transform:scaleX(0)}to{transform:none}}
@keyframes md-draw{to{stroke-dashoffset:0}}
@keyframes md-fade{from{opacity:0}to{opacity:1}}
.md-legend{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;font-size:11.5px;color:var(--t2);padding:4px 0 2px}
.md-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}
.md-empty{display:grid;place-items:center;min-height:230px;color:var(--t2);font-size:13px;text-align:center}
.md-tip{position:fixed;z-index:50;pointer-events:none;background:#0d0e0f;color:#fff;border:1px solid #55565c;border-radius:6px;padding:7px 10px;font:12px/1.4 'DM Sans',sans-serif;box-shadow:0 8px 24px #0008;opacity:0;transition:opacity .12s;max-width:240px}
.md-tip.on{opacity:1}
.md-tip b{display:block;font-size:13px}
.md-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 8px 4px;font-size:12.5px;color:var(--t2)}
.md-foot a{color:#fff;border-bottom:1px solid #fff8}
.md-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

@media(max-width:1180px){
 .md-body.hints{--slice:188px}
 .md-arrow{position:static;transform:none;width:auto;margin-left:auto;background:#e3261f;border-radius:30px;padding:5px 11px;animation:md-pulse 1.2s ease-in-out infinite}
 .md-arrow svg,.md-arrow i{display:none}
 .md-arrow small{font-size:11px;color:#fff}
 .md-arrow.gone{animation:none;display:none}
 .md-row.r1{grid-template-columns:1fr 1fr}.md-row.r1 .md-panel:first-child{grid-column:1/-1}.md-row.r2{grid-template-columns:1fr 1fr}.md-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){
 .mess-demo{padding-top:10px;padding-bottom:60px}
 .mess-raw{height:440px}
 .md-body,.md-body.hints{grid-template-columns:1fr}
 .md-slicers{grid-template-columns:1fr;width:auto;justify-self:stretch}
 .md-items,.md-slicer[data-dim=month] .md-items{grid-template-columns:repeat(4,minmax(0,1fr))}
 .md-slicer[data-dim=month] .md-items{grid-template-columns:repeat(6,minmax(0,1fr))}
 .md-item{text-align:center;padding:8px 2px}
}
@keyframes md-pulse{0%,100%{box-shadow:0 0 0 0 #e3261f88;border-radius:30px}50%{box-shadow:0 0 0 8px #e3261f00;border-radius:30px}}
@media(max-width:560px){.md-row.r1,.md-row.r2{grid-template-columns:1fr}.md-kpis{grid-template-columns:1fr 1fr}.md-kpi:first-child{grid-column:1/-1}.mess-pct{font-size:36px}}
@media(prefers-reduced-motion:reduce){.md-body{transition:none}.mess-go{animation:none!important}.md-arrow.gone{display:none!important}.mess-go,.feature-link.solid,.case-demo-link,.need-actions .button,.mess-scan,.md-arrow,.md-chart .bar,.md-chart .hbar,.md-chart .slice,.md-chart .tile,.mess-stage[data-state=done] .mess-dash{animation:none!important}.md-chart .line{animation:none;stroke-dashoffset:0}}
.md-title h3:focus{outline:0}
.mess-raw:after{height:280px;background:linear-gradient(#fff0,#fffffff2 45%,#fff 70%)}
.mess-filebar{white-space:nowrap;overflow:hidden}
.mess-filebar b{overflow:hidden;text-overflow:ellipsis;min-width:0}
@media(max-width:560px){.mess-filebar{font-size:12px;gap:6px}.mess-cta p{font-size:14px}}
.mess-stage[data-state=loading] .mess-raw:after{opacity:.3}