/* Small controls and considered motion, within the existing visual identity. */
:root{color-scheme:light;--surface:#fff;--surface-soft:#eef1f7;--surface-section:#edf1f7;--surface-inset:#e5eaf4;--header-surface:rgba(248,249,252,.93);--button-bg:#45378d;--button-hover:#232c43;--button-text:#fff;--route-text:#fff;--control-shadow:0 4px 20px #232c430a}
:root[data-theme=dark]{color-scheme:dark;--paper:#131923;--white:#1a2230;--ink:#e9edf5;--muted:#b0bccf;--purple:#bcb0f1;--coral:#ee8e9e;--line:#354052;--dark:#0e1520;--surface:#1a2230;--surface-soft:#1c2533;--surface-section:#19212e;--surface-inset:#222d3d;--header-surface:rgba(19,25,35,.94);--button-bg:#705db6;--button-hover:#5f4d9f;--button-text:#fff;--route-text:#141a26;--control-shadow:0 4px 20px #0003}
body,.people,footer{background:var(--paper)}
.header{background:var(--header-surface);border-color:var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.work,.workflow-output{background:var(--surface)}
.care-band,.case-map,.portrait{background:var(--surface-soft)}
.approach,.collaborate{background:var(--surface-section)}
.workflow-story,.flow-node>span,.flow-node:last-child>span{background:var(--surface-inset)}
.workflow-demo,.workflow-output,.case-map,.case-map>div,.conversation-points,.conversation-points li{border-color:var(--line)}
.button,.collaborate .button{background:var(--button-bg);border-color:var(--button-bg);color:var(--button-text)}
.button:hover,.collaborate .button:hover{background:var(--button-hover);border-color:var(--button-hover)}
.header-link{background:var(--button-hover);border-color:var(--button-hover);color:#fff}
.header-link:hover{background:var(--button-bg);border-color:var(--button-bg)}
.scenario-tabs button{color:var(--muted);border-color:var(--line)}
.scroll-story .scenario-tabs button[aria-selected=true],.scroll-story .flow-node.is-route>span{color:var(--route-text)}
.flow-line:before,.story-meter{background:var(--line)}
.text-link{border-bottom-color:var(--line)}
.project-status{background:var(--surface-soft);border-color:var(--line);color:var(--ink)}
.skip{background:var(--surface);color:var(--ink)}
.experience-controls{position:fixed;right:20px;bottom:18px;z-index:50;display:flex;align-items:center;gap:8px}
.experience-controls .motion{position:static;margin:0;background:var(--surface);border-color:var(--line);box-shadow:var(--control-shadow)}
.theme-toggle{width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--purple);box-shadow:var(--control-shadow)}
.theme-toggle[hidden]{display:none}
.theme-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .sun{display:none}
[data-theme=dark] .theme-toggle .sun{display:block}
[data-theme=dark] .theme-toggle .moon{display:none}
.theme-toggle:hover,.experience-controls .motion:hover{border-color:var(--purple)}
footer{padding-right:236px}
[data-theme=dark] .brand{position:relative;display:block}
[data-theme=dark] .brand img{filter:brightness(0) invert(1)}
/* Retain the original coloured symbol and AI letters over the inverse wordmark. */
[data-theme=dark] .brand::before,[data-theme=dark] .brand::after{content:'';position:absolute;inset:0;z-index:1;background:url('assets/prepaid-logo.webp') center/100% 100% no-repeat;pointer-events:none}
[data-theme=dark] .brand::before{clip-path:inset(0 67% 0 0)}
[data-theme=dark] .brand::after{clip-path:inset(0 13% 0 70%)}
[data-theme=dark] .solution-index{color:#8fa0ba}
[data-theme=dark] .scroll-story[data-route=unknown]{--route-accent:#d5bc6f}
[data-theme=dark] .scroll-story[data-route=handoff]{--route-accent:#ee9ba9}
[data-theme=dark] .flow-node>span{border-color:#7585a0}
[data-theme=dark] .research-intro em{color:#d2cff2}
[data-theme=dark] .nav-ready .header nav a{border-color:var(--line)}
[data-theme=dark] .header nav{background:var(--paper)}
[data-theme=dark] .source-chip{color:var(--ink)}
[data-theme=dark] .hero-background{opacity:1}
.motion-enabled .motion-reveal{transform:translate3d(0,16px,0);transition:opacity .5s var(--ease) var(--reveal-delay,0s),transform .65s var(--ease) var(--reveal-delay,0s)}
.motion-enabled .motion-reveal.is-visible{transform:none}
.motion-enabled .hero-copy .motion-reveal{transition-delay:0s}
.motion-enabled :where(.button,.header-link,.scenario-tabs button,.theme-toggle,.motion){transition:background-color .22s,border-color .22s,color .22s,transform .3s var(--ease),box-shadow .3s}
.motion-enabled :where(.button,.header-link,.theme-toggle,.motion):active{transform:translateY(1px) scale(.985)}
.motion-enabled .scenario-tabs button:active{transform:scale(.98)}
.motion-enabled .header nav a{transition:color .22s,border-color .22s}
.motion-enabled .flow-progress,.motion-enabled .story-enabled .flow-progress{transition:transform .55s var(--ease),background-color .3s}
.motion-enabled .story-meter i{transition:transform .1s linear,background-color .3s}
.motion-enabled .reading-progress span{transition:transform .09s linear}
.motion-enabled details[open]>div{animation:detail-enter .28s var(--ease) both}
.motion-enabled .header[data-menu-open=true] nav{animation:menu-enter .24s var(--ease) both}
.motion-enabled.theme-transition :where(body,.header,.care-band,.section,.workflow-story,.workflow-output,.case-map,.project-status,.portrait,footer,.theme-toggle,.motion,.scenario-tabs button){transition:background-color .28s,color .22s,border-color .28s}
.theme-transition .hero-background{transition:opacity .28s}
html[data-motion=paused]{scroll-behavior:auto}
body:not(.motion-enabled),body:not(.motion-enabled) *,body:not(.motion-enabled) *::before,body:not(.motion-enabled) *::after{transition:none!important;animation:none!important}
body:not(.motion-enabled) :where(.button,.header-link,.theme-toggle,.motion):hover,body:not(.motion-enabled) :where(.button,.header-link,.theme-toggle,.motion):active{transform:none!important}
@keyframes detail-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes menu-enter{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(hover:hover) and (pointer:fine){.motion-enabled .button:hover{transform:translateY(-2px);box-shadow:0 5px 16px #45378d16}.motion-enabled .theme-toggle:hover{transform:translateY(-1px)}}
@media(max-width:820px){[data-theme=dark] .header nav{background:var(--paper)}}
@media(max-width:700px){.experience-controls{right:16px;bottom:max(16px,env(safe-area-inset-bottom));gap:7px}.experience-controls .motion{min-width:126px}footer{padding-right:var(--pad);padding-bottom:88px}.motion-enabled .motion-reveal{transform:translate3d(0,12px,0);transition-delay:0s}.motion-enabled .motion-reveal.is-visible{transform:none}}
@media(prefers-reduced-motion:reduce){.theme-transition .hero-background{transition:none}.motion-enabled details[open]>div,.motion-enabled .header[data-menu-open=true] nav{animation:none}}