/* Local preview: a continuous canvas between homepage compositions. */
body:has(> main#main){background:#080f0c}
#main{background:radial-gradient(ellipse 85% 600px at 85% 550px,#23482e38,transparent),radial-gradient(ellipse 90% 900px at 10% 2100px,#1c3b2a30,transparent),radial-gradient(ellipse 80% 800px at 85% 3800px,#27452b25,transparent),#080f0c}
#main>section{border-top:0;border-bottom:0;box-shadow:none;background-color:transparent;background-image:none}
#main>.hero{background:transparent}
#main>.hero::before{mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
#main .hero-air{mask-image:linear-gradient(180deg,#000 65%,transparent 100%)}
#main>.light-section::before{mask-image:linear-gradient(180deg,transparent,#0008 30%,#0008 70%,transparent)}
#main>.closing-section{background:transparent}
#main>.closing-section::after{background:none}
#main .closing-atmosphere{mask-image:linear-gradient(180deg,transparent,#000 35%,#000 65%,transparent)}
body:has(> main#main) .site-footer{border-top:0;background:#080f0c}

#main>.hero::after{background:linear-gradient(180deg,#080f0c 0%,#080f0c26 35%,transparent 70%)}

#main>.hero{mask-image:linear-gradient(180deg,#000 0%,#000 calc(100% - 60px),transparent 100%)}

/* Remove middle-section seams and decorative grid boundaries. */
#main{background:#080f0c}
#main>section:not(.hero)::before,#main>section:not(.hero)::after{background:none;border:0;box-shadow:none}
#main>.light-section::before{content:none;display:none}
#main .protocol-foot,#main .autonomy-footer{border-top:0}
#main>.hero{padding-bottom:150px;mask-image:linear-gradient(180deg,#000 0%,#000 calc(100% - 120px),transparent 100%)}
#main .closing-atmosphere{opacity:.55}
@media(max-width:599px){#main>.hero{padding-bottom:130px;mask-image:linear-gradient(180deg,#000 0%,#000 calc(100% - 100px),transparent 100%)}}

/* Keep the payment artwork open and the closing composition on one canvas. */
#main .payment-art .art-caption{border-bottom:0;box-shadow:none}
#main .closing-atmosphere{display:none;background:none}
#main>.closing-section{border:0;background:none;box-shadow:none}
body:has(> main#main)>.site-footer{background:#080f0c;border:0;box-shadow:none}
body:has(> main#main) .footer-bottom{border-top:0}

/* A soft glow has no rectangular image edge at the hero boundary. */
#main>.hero{mask-image:none;-webkit-mask-image:none;background:transparent}
#main>.hero::before{inset:0;background:radial-gradient(ellipse at 50% 35%,#294a3538 0%,#18352318 40%,transparent 72%);opacity:1;mask-image:none;animation:none}
#main>.hero::after{content:none;display:none}
#main>.ecosystem-strip{border:0;background:none;box-shadow:none}

/* Dashboard demonstration: a deliberate sequence on entry and tab changes. */
#platform .demo-playing .chart-line{stroke-dasharray:1!important;stroke-dashoffset:1;animation:xpay-preview-chart 2.2s .35s cubic-bezier(.22,1,.36,1) both!important}
#platform .demo-playing .chart-wrap svg>path[fill]{animation:xpay-preview-fill 1.8s .65s both!important}
#platform .demo-playing .demo-metrics>div,#platform .demo-playing .demo-table-row,#platform .demo-playing .meter-row{animation:xpay-preview-reveal .7s var(--reveal-delay,150ms) cubic-bezier(.22,1,.36,1) both!important}
#platform .demo-playing .status-pill{animation:xpay-preview-status .6s 1.3s both!important}
#platform .demo-metrics strong{font-variant-numeric:tabular-nums}
@keyframes xpay-preview-chart{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes xpay-preview-fill{from{opacity:0}to{opacity:1}}
@keyframes xpay-preview-reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes xpay-preview-status{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){#platform .demo-playing .chart-line,#platform .demo-playing .chart-wrap svg>path[fill],#platform .demo-playing .demo-metrics>div,#platform .demo-playing .demo-table-row,#platform .demo-playing .meter-row,#platform .demo-playing .status-pill{animation:none!important;stroke-dashoffset:0!important;opacity:1;transform:none}}

/* Coordinated chart motion, with a soft tracking light rather than a fast wipe. */
#platform .demo-playing .chart-line{animation:none!important;stroke:#baf681;stroke-width:2.4;filter:drop-shadow(0 0 4px #a4ec7540)}
#platform .demo-playing .chart-wrap svg>path[fill]{animation:none!important;opacity:.65}
#platform .demo-playing .demo-metrics>div,#platform .demo-playing .demo-table-row,#platform .demo-playing .meter-row{animation:xpay-preview-soft .95s var(--reveal-delay,150ms) ease both!important}
#platform .demo-playing .status-pill{animation:none!important}
#platform .preview-chart-guide{stroke:#baf68145;stroke-width:1;stroke-dasharray:3 5;vector-effect:non-scaling-stroke;fill:none}
#platform .preview-chart-halo{fill:#baf68114;stroke:#baf68130;stroke-width:1;vector-effect:non-scaling-stroke}
#platform .preview-chart-cursor{fill:#e6ffd4;stroke:#80c655;stroke-width:2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px #baf681aa)}
@keyframes xpay-preview-soft{from{opacity:.15;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#platform .demo-playing .demo-metrics>div,#platform .demo-playing .demo-table-row,#platform .demo-playing .meter-row{animation:none!important}}