.stage{margin:10px 0 12px;padding:8px;border-radius:14px;background:rgba(0,0,0,.18)}.stage svg.cf-demo-object{display:block;width:100%;height:auto;max-height:300px;border-radius:10px}.stage-cap{font-size:12px;opacity:.85;margin:6px 4px 0;text-align:center}@media (prefers-reduced-motion:reduce){.stage svg.cf-demo-object *{transition:none!important;animation:none!important}}

/* Layout lock (James): [stage LEFT | app phone RIGHT] row, then a full-width scenario panel UNDERNEATH.
   .cfd-device = outer column; .cfd-row = side-by-side row; .cfd-phone = real app UI only; .cfd-scenarios = demo-only controls. */
.cfd-device{display:flex!important;flex-direction:column;align-items:stretch;gap:20px;width:auto!important;max-width:1100px!important;margin:0 auto;background:none!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
.cfd-row{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:24px}
.cfd-left{flex:1 1 360px;max-width:680px;min-width:0;position:sticky;top:16px}
.cfd-left .stage{margin:0;background:var(--cfd-surface);color:var(--cfd-text)}.cfd-left .stage svg.cf-demo-object{max-height:none}
.cfd-phone{flex:0 0 340px;width:340px;max-width:100%;padding:12px;background:var(--cfd-bezel);border-radius:44px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.cfd-scenarios{width:100%;box-sizing:border-box;background:var(--cfd-surface);color:var(--cfd-text);padding:14px 16px;border:1px dashed rgba(127,127,127,.45);border-radius:14px;font-size:.85rem;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.cfd-rail-h{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;opacity:.75;flex-basis:100%}
.cfd-rail-btns{display:flex;flex-wrap:wrap;gap:8px}
.cfd-scenarios .cfd-notify{padding:0;margin:0;background:none}
.cfd-scenarios .cfd-footer{margin:0 0 0 auto;padding:0;display:flex;align-items:center;gap:10px;text-align:left}
/* Side-by-side down to 720px; narrower: tighter gap/phone, then stack only on phones. */
@media (max-width:860px){.cfd-row{gap:14px}.cfd-phone{flex-basis:310px;width:310px}.cfd-left{flex-basis:300px}}
@media (max-width:640px){.cfd-row{flex-direction:column;align-items:center}.cfd-left{position:static;max-width:100%;width:100%;flex:none}.cfd-scenarios .cfd-footer{margin-left:0}}

/* Viewport fit (James 2026-10-26): keep app controls on-screen at ~1280x800.
   Phone is capped and its screen scrolls like a real app; stage scales down instead of pushing controls off. */
html,body{margin:0}
.cfd-device{padding:8px 0 4px!important;gap:14px}
.cfd-left .stage svg.cf-demo-object{max-height:520px;width:100%;object-fit:contain}
.cfd-phone{max-height:660px;display:flex;flex-direction:column;box-sizing:border-box}
.cfd-phone .cfd-screen{min-height:0;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.cfd-header{padding:16px 16px 8px}
.cfd-gauge{padding:10px 12px}.cfd-gauge-value{font-size:1.35rem;margin:2px 0}
.cfd-scenarios{padding:10px 14px;gap:8px 14px}
@media (max-width:640px){.cfd-phone{max-height:none}.cfd-phone .cfd-screen{overflow:visible}}