/* Only the client concept is recolored. No parent-page styles are affected. */
:root[data-palette] body{background:var(--demo-bg);color:var(--demo-text)}
:root[data-palette] header{border-top:5px solid var(--demo-accent)}
:root[data-palette] header,:root[data-palette] .notice,:root[data-palette] .services,:root[data-palette] .list li{border-color:var(--demo-line)}
:root[data-palette] header{border-top-color:var(--demo-accent)}
:root[data-palette] .notice,:root[data-palette] .eyebrow,:root[data-palette] .lead,:root[data-palette] .intro p,:root[data-palette] .bottom p,:root[data-palette] .offerings p,:root[data-palette] header>span{color:var(--demo-muted)}
:root[data-palette] .diagram{background:var(--demo-accent);color:var(--demo-on-accent)}
:root[data-palette] .diagram strong,:root[data-palette] .diagram span{color:var(--demo-on-accent)}
:root[data-layout=visual] main{display:flex;flex-direction:column}
:root[data-layout=visual] main>.photo,:root[data-layout=visual] main>.diagram{order:-1;margin:0 0 30px}
:root[data-layout=visual] main>.photo{height:340px}
:root[data-layout=visual] .intro{padding-top:7px}
@media(max-width:440px){:root[data-layout=visual] main>.photo{height:260px}}
:root[data-palette] .photo{border-bottom:5px solid var(--demo-accent)}