/* Shared color roles follow the native AppTheme palette. */
:root{--canvas:#121316;--surface:#1b1d21;--raised:#23252a;--inset:#16171b;--text:#f1f0ed;--secondary:#b5b7bc;--quiet:#a3a7b0;--accent-text:#9dbdff;--border:#f1f0ed20;--control-border:#f1f0ed35;--accent-soft:#275fd825;--header:#121316eb;--story:#181b22;--stage-start:#293750;--stage-end:#1c2432;--stage-alt:#222d40;--shadow:#08090b52;--chart:#8cb2ff;--chart-dot:#b2ceff;--mirror:linear-gradient(155deg,#3b4a64,#1a2233 52%,#172e56);--ink:var(--canvas);--card:var(--surface);--elevated:var(--raised);--white:var(--text);--paper:var(--surface);--muted:var(--secondary);--electric:var(--accent-text);--line:var(--border);color-scheme:dark}
:root[data-theme=light]{--canvas:#e9ebef;--surface:#fcfcfa;--raised:#fefefc;--inset:#e2e4e8;--text:#1b1d21;--secondary:#5e6168;--quiet:#626771;--accent-text:#2455b4;--border:#1b1d2124;--control-border:#1b1d2140;--accent-soft:#275fd810;--header:#e9ebefed;--story:#e2e8f2;--stage-start:#d7e1f0;--stage-end:#e4e8ef;--stage-alt:#d5dfef;--shadow:#12131612;--chart:#275fd8;--chart-dot:#275fd8;--mirror:linear-gradient(155deg,#f5f8fd,#d5dfef 52%,#b4c9eb);color-scheme:light}
body{background:var(--canvas);color:var(--text)}.site-header{background:var(--header);border-color:var(--border)}.nav-actions{gap:18px}.theme-toggle{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;background:var(--accent-soft);color:var(--accent-text);border:1px solid var(--border);border-radius:50%;transition:background .2s,border-color .2s}.theme-toggle:hover{background:var(--raised);border-color:var(--control-border)}.theme-toggle svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.theme-moon{display:none}:root[data-theme=light] .theme-sun{display:none}:root[data-theme=light] .theme-moon{display:block}.language-switch,nav a:hover,nav a[aria-current]{color:var(--text)}.button-nav{border-color:var(--control-border);background:var(--surface);color:var(--text)}.button-nav:hover{background:var(--raised)}.text-link{color:var(--secondary)}.skip-link{color:#fff}.soft-text{color:var(--secondary)}.availability{color:var(--quiet)}
.light-section{background:var(--surface);color:var(--text);color-scheme:inherit}.product-intro,.training-story{background:var(--surface)}.nutrition-story{background:var(--canvas)}.progress-story{background:var(--story)}.about-section{background:var(--surface)}.intro-heading h2 span,.story-kicker,.light-section .story-kicker,.product-jumps a>span:last-child,.reflection-copy h3,.support-title,.contact-link,details a{color:var(--accent-text)}.intro-heading>p,.story-description,.light-section .story-description,.screen-card p,.light-section .screen-card p,.story-details p,.light-section .story-details p,.coach-features p,.support-grid p,.reflection-copy p,.about-copy .lead{color:var(--secondary)}.screens-note{color:var(--quiet)}.product-jumps a,.light-section .story-details{border-color:var(--border)}.contact-link{border-color:var(--control-border)}.contact-link:hover{color:var(--text)}
.feature-story .screen-preview,.feature-story .screen-card:nth-child(2) .screen-preview,.feature-story .screen-card:nth-child(3) .screen-preview{background:radial-gradient(ellipse at 50% 25%,var(--stage-start),var(--stage-end) 75%);border-color:var(--border)}.feature-story .screen-card:nth-child(2) .screen-preview{background:radial-gradient(ellipse at 50% 25%,var(--stage-start),var(--stage-alt) 75%)}.device-frame{box-shadow:0 22px 35px var(--shadow),0 0 0 1px #121722}.zoom-mark{opacity:1;background:var(--surface);color:var(--accent-text);border-color:var(--control-border)}
.progress-lab{background:linear-gradient(130deg,var(--story),var(--surface) 65%);border-color:var(--border);box-shadow:0 30px 70px var(--shadow)}.lab-controls{background:var(--surface)}.number-fields label,.volume-readout>span,.mascot-response p{color:var(--secondary)}.number-fields input{background:var(--canvas);color:var(--text);border-color:var(--control-border)}.reset-demo{color:var(--accent-text);border-color:var(--control-border)}.reset-demo:hover{color:var(--text)}#volume-change,.set-symbol{color:var(--accent-text);background:var(--accent-soft);border-color:var(--border)}.chart-grid path{stroke:var(--border)}#chart-line{stroke:var(--chart)}#chart-dots circle{fill:var(--chart-dot);stroke:var(--surface)}#chart-labels text{fill:var(--quiet)}.chart-caption,.demo-privacy,.demo-label,.coach-copy p.coach-disclaimer{color:var(--quiet)}
.conversation{box-shadow:0 30px 80px var(--shadow)}.demo-choices button{color:var(--secondary);border-color:var(--control-border)}.demo-choices button[aria-pressed=true]{color:var(--accent-text);border-color:var(--accent-text);background:var(--accent-soft)}.demo-choices button:hover{border-color:var(--accent-text)}.assistant-message{color:var(--secondary);background:var(--raised);border-color:var(--border)}summary{color:var(--text)}details[open] summary{color:var(--accent-text)}details>p{color:var(--secondary)}.faq-plus::before,.faq-plus::after{background:var(--accent-text)}.site-footer{background:var(--inset)}.footer-top,.footer-bottom,.motion-toggle{color:var(--secondary)}.screen-dialog{background:var(--surface);color:var(--text);color-scheme:inherit;border-color:var(--control-border)}.screen-dialog-top{background:var(--surface)}.screen-close{color:var(--text);background:var(--raised);border-color:var(--control-border)}
:root[data-theme=light] .gradient-text{background-image:linear-gradient(100deg,#214fbc,#3475d9);color:#2455b4}:root[data-theme=light] .mirror-frame{background:var(--mirror);border-color:#819ac04f;box-shadow:inset 0 0 0 5px #ffffff5c,inset 0 0 70px #dde7f8,0 0 0 8px #d4dce8,0 0 0 9px #849bbc30,0 45px 80px #273e611c}:root[data-theme=light] .hero-stage::before{background:radial-gradient(ellipse,#275fd818,transparent 64%)}:root[data-theme=light] .studio-mascot{filter:drop-shadow(0 22px 16px #273e6133)}:root[data-theme=light] .screen-dialog::backdrop{background:#1b2738a6}
@media(max-width:900px){.nav-actions{gap:12px}}
@media(max-width:700px){nav{background:var(--surface)}.menu-toggle span{background:var(--text)}.nav-actions{gap:10px}.navigation{gap:12px}}
@media(max-width:380px){.wordmark{font-size:24px;gap:7px}.navigation{gap:8px}.nav-actions{gap:5px}.theme-toggle{width:42px;height:42px}}
/* Keep small white button labels readable across the entire gradient. */
.button-primary{background:linear-gradient(115deg,#214fbc,#2e6cde)}