/* Preview A: the experience continues section 02's quiet light palette. */
.experience-image-light{display:none!important}
html[data-variant="charcoal"] #scenario .experience-scroll{background:#f7f7f7;color:#1a1a1a}
html[data-variant="charcoal"] .experience-image-dark{display:none!important}
html[data-variant="charcoal"] .experience-image-light{display:block!important}
html[data-variant="charcoal"] .experience-orbit::before{border-color:#d9dfe3}
html[data-variant="charcoal"] .experience-orbit-track{border-color:#b9c4cc}
html[data-variant="charcoal"] .experience-orbit-track span{background:linear-gradient(#b9c4cc,transparent)}
html[data-variant="charcoal"] .orbit-point{background:#f7f7f7;border-color:#cbd3d9;color:#65717b}
html[data-variant="charcoal"] .experience-orbit small,
html[data-variant="charcoal"] .experience-index{color:#66737d}
html[data-variant="charcoal"] .experience-kicker{color:#ad0c00}
html[data-variant="charcoal"] #scenario .experience-panel h3{color:#1a1a1a}
html[data-variant="charcoal"] #scenario .experience-panel p{color:#555}
html[data-variant="charcoal"] .experience-progress{background:#d0d5d9}
html[data-variant="charcoal"] .experience-visual{background:#fff;border-color:#d5dce0;box-shadow:0 25px 65px #1a1a1a18}
html[data-variant="charcoal"] .experience-visual figcaption{background:#fffffff0;color:#65717b}
@media(max-width:900px){
  html[data-variant="charcoal"] .experience-panel{border-color:#d0d5d9}
}
@media(prefers-reduced-motion:reduce){
  html[data-variant="charcoal"] .experience-panel{border-color:#d0d5d9}
}

/* Preview B: one continuous dark opening from hero through the experience. */
html[data-variant="dark-hero"] .hero,
html[data-variant="dark-hero"] #scenario{background:#101419;color:#f5f6f7}
html[data-variant="dark-hero"] header.nav{background:#101419f2;border-bottom-color:#2b333b}
html[data-variant="dark-hero"] .logo-word{color:#f5f6f7}
html[data-variant="dark-hero"] .nav-links a{color:#c4cbd2}
html[data-variant="dark-hero"] .nav-links a:hover{color:#fff}
html[data-variant="dark-hero"] .hero{padding-bottom:76px}
html[data-variant="dark-hero"] .hero::before{display:none}
html[data-variant="dark-hero"] .hero-word{color:#252d37}
html[data-variant="dark-hero"] .hero h1,
html[data-variant="dark-hero"] .summary-card h3,
html[data-variant="dark-hero"] #scenario h2,
html[data-variant="dark-hero"] #scenario .proof-title,
html[data-variant="dark-hero"] #scenario .proof-item span{color:#f5f6f7}
html[data-variant="dark-hero"] .hero-lead,
html[data-variant="dark-hero"] #scenario .lead,
html[data-variant="dark-hero"] .summary-card p{color:#c8d1da}
html[data-variant="dark-hero"] .hero-support,
html[data-variant="dark-hero"] .visual-caption,
html[data-variant="dark-hero"] .visual-foot,
html[data-variant="dark-hero"] #scenario .proof-sub,
html[data-variant="dark-hero"] #scenario .proof-item small,
html[data-variant="dark-hero"] #scenario>.wrap>.note-small{color:#aab8c5}
html[data-variant="dark-hero"] .hero .sub-link.outline{color:#d0d8df;border-color:#667583}
html[data-variant="dark-hero"] .hero .sub-link.outline:hover{color:#fff;border-color:#fff}
html[data-variant="dark-hero"] .summary,
html[data-variant="dark-hero"] .summary-card+.summary-card,
html[data-variant="dark-hero"] .visual-caption,
html[data-variant="dark-hero"] .visual-foot{border-color:#3c4651}
html[data-variant="dark-hero"] .hero-map text[x="422"]{fill:#bdc8d3}
html[data-variant="dark-hero"] .hero-map>rect[fill="url(#map-grid)"]{display:none}
html[data-variant="dark-hero"] .hero-map .map-ripples{stroke:#46515b;stroke-width:.7}
html[data-variant="dark-hero"] .hero-map>g[stroke="#ff2200"]{stroke:#e64a3a;stroke-width:1.3}
html[data-variant="dark-hero"] .hero-map .route-motion circle{r:4}
html[data-variant="dark-hero"] .hero-map .yosuka-halo{filter:blur(23px)}
html[data-variant="dark-hero"] .hero-map rect[fill="white"]{fill:#f8f9f9;stroke:#cbd0d3}
html[data-variant="dark-hero"] #scenario{padding-top:64px}
html[data-variant="dark-hero"] #scenario>.wrap>.section-marker{color:#9babba}
html[data-variant="dark-hero"] #scenario>.wrap>.section-marker::after{background:#3b4651}
html[data-variant="dark-hero"] #scenario>.wrap>.section-marker span:first-child{border-color:#52606e}
html[data-variant="dark-hero"] #scenario .experience-scroll{margin-top:38px}
html[data-variant="dark-hero"] #scenario .demo-video-block{color:#1a1a1a}
html[data-variant="dark-hero"] #scenario .demo-video-head h3{color:#1a1a1a}
html[data-variant="dark-hero"] #scenario .demo-video-head p,
html[data-variant="dark-hero"] #scenario .demo-video-block .note-small{color:#666}
html[data-variant="dark-hero"] #scenario .proof-item{border-color:#394550}
@media(max-width:760px){
  html[data-variant="dark-hero"] .hero{padding-bottom:50px}
  html[data-variant="dark-hero"] #scenario{padding-top:46px}
}