/* Static illustrations stay beneath copy and protected balance panels. */
.pulse-entry,.market-pulse-entry,.compare-entry,.demo-trade-toggle,.stock-demo-toggle,.feature-cta,.stock-feature-link{position:relative;isolation:isolate}
.button-pattern{position:absolute;z-index:-1;inset:2px;overflow:hidden;border-radius:inherit;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 22%,#000 67%);mask-image:linear-gradient(90deg,transparent 22%,#000 67%)}
.button-pattern>svg{position:absolute;right:2%;top:50%;width:64%;height:125%;transform:translateY(-50%);opacity:.14;overflow:visible}
.pattern-heatmap>svg{right:0;width:69%;height:140%;opacity:.23}
.pattern-compare>svg{right:1%;width:67%;height:135%;opacity:.24}
.pattern-my-chart>svg{right:0;width:69%;height:145%;opacity:.24}
.pattern-portfolio>svg{right:0;width:72%;height:155%;opacity:.28}
/* Isolate the up/down arrows in the orange space before the amount. */
.button-pattern.pattern-demo{left:34%;right:auto;width:14%;-webkit-mask-image:none;mask-image:none}
.pattern-demo>svg{left:0;right:auto;width:100%;height:94%;opacity:.24}
html[data-theme=dark] .pattern-heatmap>svg{opacity:.19}
html[data-theme=dark] .pattern-compare>svg{opacity:.20}
html[data-theme=dark] .pattern-my-chart>svg{opacity:.20}
html[data-theme=dark] .pattern-portfolio>svg{opacity:.23}
html[data-theme=dark] .pattern-demo>svg{opacity:.20}
@media(max-width:720px){.button-pattern>svg{width:70%;right:0}.pattern-heatmap>svg{width:74%}.pattern-compare>svg{width:72%}.pattern-my-chart>svg{width:74%}.pattern-portfolio>svg{width:76%}.pattern-demo>svg{width:100%;right:auto}}
@media(max-width:360px){.button-pattern.pattern-demo{left:30%;width:13%}}
