/* One shared canvas lets chapters change color without a seam between sections. */
body.color-flow{background:var(--flow-bg,#ece5f0)}
.color-flow .examples-scroll,.color-flow .examples-sticky,.color-flow .product-platform,.color-flow .product-intro,.color-flow .product-chapter,.color-flow .product-swap,.color-flow footer{background:transparent;color:var(--flow-ink)}
.color-flow .examples-header .eyebrow,.color-flow .examples-intro p,.color-flow .example-content>p,.color-flow .example-index,.color-flow .examples-hint,.color-flow .example-navigation button,.color-flow .product-intro>p:not(.eyebrow),.color-flow .product-copy>p:not(.eyebrow),.color-flow .product-copy .eyebrow,.color-flow .product-copy li,.color-flow .product-vision .demo-note,.color-flow .swap-heading>p:not(.eyebrow),.color-flow .swap-business>p,.color-flow .swap-steps p,.color-flow .swap-business>span,.color-flow footer small{color:var(--flow-muted)}
.color-flow .product-copy h2 em,.color-flow .product-platform h2 em,.color-flow .examples-header h2 em,.color-flow .swap-heading h2 em,.color-flow .swap-heading .eyebrow,.color-flow .swap-steps>div>span{color:var(--flow-accent)}
.color-flow .product-link,.color-flow .product-vision .product-link,.color-flow .product-intro>nav a,.color-flow .example-navigation button[aria-current=step],.color-flow .product-vision .product-copy .vision-emphasis{color:var(--flow-ink);border-color:var(--flow-accent)}
.color-flow .product-copy li{border-color:color-mix(in srgb,var(--flow-muted) 24%,transparent)}
.color-flow .product-intro>nav a,.color-flow .swap-steps{border-color:color-mix(in srgb,var(--flow-accent) 35%,transparent)}
.color-flow .examples-progress{background:color-mix(in srgb,var(--flow-accent) 18%,transparent)}
.color-flow .examples-progress>span{background:var(--flow-accent)}
.color-flow .product-intelligence:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('assets/retail.jpg') center/cover;opacity:.035;mask-image:linear-gradient(transparent,#000 25%,#000 75%,transparent)}
.color-flow .portal:after{content:'';position:absolute;inset:70% 0 0;background:linear-gradient(transparent,#ece5f0);pointer-events:none}
@media(prefers-reduced-motion:reduce){body.color-flow{background:#100e12}}

.color-flow .vision-selector button{color:var(--flow-muted)}.color-flow .vision-selector button[aria-pressed=true]{color:var(--flow-ink);border-color:var(--flow-accent)}