html[data-brand="demo"] {
  --primary: #0F4C5C;
  --primary-hover: #0B3945;
  --accent: #E9A23B;
  --bg: #F4F7F9;
  --text: #1E293B;
}
html[data-brand="demo"] body { background: #F4F7F9; color: #1E293B; }
html[data-brand="demo"] .header,
html[data-brand="demo"] .login-brand { background: #0F4C5C; }
.demo-ribbon { position: sticky; top: 0; z-index: 2000; padding: 6px 12px; text-align: center; font: 600 12px Arial, sans-serif; background: #E9A23B; color: #1E293B; }
.demo-wordmark { width: 160px; max-height: 40px; }
html[data-brand="demo"] {
  --brand-primary: #0F4C5C;
  --brand-accent: #E9A23B;
  --surface-1: #F4F7F9;
  --text-primary: #1E293B;
}
html[data-brand="demo"] .pp-header-logo,
html[data-brand="demo"] .login-pp-logo { display: block !important; height: 32px; width: auto; }
html[data-brand="demo"] .login-pp-ribbon { display: none; }
html[data-brand="demo"] .login-pitch { background: #0F4C5C; }
html[data-brand="demo"] { --demo-ribbon-height: 28px; --navy: #0F4C5C; --navy-l: #176779; --gold: #E9A23B; --gold-l: #F0B65E; }
html[data-brand="demo"] .demo-ribbon { height: var(--demo-ribbon-height); box-sizing: border-box; }
html[data-brand="demo"] .ch-root { top: var(--demo-ribbon-height); }
html[data-brand="demo"] .header { top: var(--demo-ribbon-height); background: #0F4C5C !important; }
html[data-brand="demo"] .ch-brand { gap: 10px; }
html[data-brand="demo"] .ch-brand-logo { width: 32px; height: 32px; flex-shrink: 0; }
html[data-brand="demo"] .btn-primary { background: #0F4C5C; }