/* The website preview shares the operational app's shell, spacing and palette. */
.demo-apps { padding-bottom:28px; }
.demo-apps-heading { text-align:center; padding:24px 12px; border-bottom:1px solid var(--demo-line); margin-bottom:24px; }
.demo-apps-heading h3 { color:var(--demo-gold); font-size:25px; }
.demo-apps-heading p { margin:12px 0 0; font-size:12px; color:var(--demo-muted); }
.demo-app-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px 10px; max-width:940px; margin:0 auto; }
.demo-app-tile { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:12px; min-width:0; min-height:135px; padding:12px 6px; text-align:center; border:1px solid transparent; border-radius:6px; background:none; color:var(--demo-muted); font-size:12px; font-weight:600; line-height:1.4; }
.demo-app-tile>img { width:60px; height:60px; object-fit:contain; padding:10px; background:var(--demo-input); border:1px solid var(--demo-line); border-radius:8px; flex:none; }
.demo-app-tile>span { max-width:100%; overflow-wrap:break-word; }
.sales-demo .demo-app-featured { position:relative; border-color:var(--demo-gold); color:var(--demo-gold); background:#f6c1770b; }
.demo-app-featured:hover { background:#f6c17718; }
.demo-app-featured>img { border-color:var(--demo-gold); }
.demo-app-pointer { position:absolute; left:calc(50% - 6px); top:-16px; font-size:14px; line-height:1; }
.demo-app-cue { display:flex; align-items:center; justify-content:center; gap:8px; font-size:10px; font-weight:500; }
.demo-app-cue i { font-size:15px; }
.demo-control-period { font-size:10px; color:var(--demo-muted); }
.demo-control-tabs { display:flex; flex-wrap:wrap; gap:5px; padding:0 0 14px; border-bottom:1px solid var(--demo-line); }
.demo-control-tabs button { display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:9px 11px; border:1px solid transparent; border-radius:5px; color:var(--demo-muted); background:none; font-size:11px; }
.demo-control-tabs button[aria-pressed=true] { color:var(--demo-gold); border-color:var(--demo-line); background:var(--demo-card); }
.demo-control-tabs button:hover { border-color:var(--demo-blue); }
.demo-control-filters { display:flex; flex-direction:row; flex-wrap:wrap; align-items:end; gap:12px; padding:20px 0; border-bottom:1px solid var(--demo-line); }
.demo-control-filters label { display:flex; flex-direction:column; gap:7px; min-width:125px; flex:1 1 130px; color:var(--demo-muted); font-size:11px; }
.demo-control-filters .demo-control-search { flex:2 1 200px; }
.demo-control-filters #demo-threshold-field { flex-basis:165px; }
.demo-control-message { padding:14px 0; font-size:10px; color:var(--demo-muted); }
.demo-control-kpis .sales-kpi { min-height:115px; }
.demo-control-kpis .sales-kpi strong { font-size:21px; }
.demo-tone-blue { color:var(--demo-blue); } .demo-tone-gold { color:var(--demo-gold); } .demo-tone-green { color:var(--demo-green); }
.demo-control-table { margin:12px 0 20px; }
.demo-control-table td:first-child { width:42px; padding:6px; }
.demo-control-table .sales-table .align-left, .demo-control-dialog .sales-table .align-left { text-align:left; }
.demo-control-badge { display:inline-flex; padding:4px 7px; border-radius:4px; font-size:10px; background:#82aaff19; color:var(--demo-blue); }
.demo-control-badge.open { background:#ffa3a319; color:var(--demo-red); }
.demo-control-badge.review { background:#f6c17719; color:var(--demo-gold); }
.demo-control-badge.reversed, .demo-control-badge.adjusted { background:#79d3b019; color:var(--demo-green); }
.demo-control-notes { border-block:1px solid var(--demo-line); padding:16px 0; color:var(--demo-muted); font-size:11px; line-height:1.7; }
.demo-control-notes summary { cursor:pointer; color:var(--demo-blue); }
.demo-control-notes p { margin-top:12px; max-width:85ch; }
.demo-control-empty { padding:36px 16px; text-align:center; color:var(--demo-muted); }
.demo-control-empty>i { color:var(--demo-green); font-size:24px; }
.demo-control-empty p { margin:12px 0; font-size:12px; }
.demo-control-dialog { width:min(1080px,calc(100% - 28px)); border-radius:8px; }
.demo-control-dialog h3 { line-height:1.5; overflow-wrap:anywhere; }
.demo-control-dialog h4 { font-size:14px; margin:0 0 10px; }
.demo-control-dialog p { line-height:1.7; }
.demo-control-dialog section { padding:18px 0; border-top:1px solid var(--demo-line); }
.demo-detail-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:0 0 22px; }
.demo-detail-fields dt { color:var(--demo-muted); font-size:10px; margin-bottom:6px; }
.demo-detail-fields dd { margin:0; font-size:12px; overflow-wrap:anywhere; }
.demo-calculation { border-left:2px solid var(--demo-gold); padding:4px 0 4px 14px; color:var(--demo-gold); font-variant-numeric:tabular-nums; }
.demo-detail-source { color:var(--demo-muted); }
.brand-motion-row { display:flex; align-items:center; width:100%; max-width:660px; gap:10px; }
.hero #brand-motion { position:relative; width:100%; min-width:0; height:1.18em; font-size:88px; line-height:1.18; white-space:nowrap; overflow:clip; }
.hero #brand-motion .brand-letter { position:absolute; left:0; top:0; display:inline-block; will-change:transform,opacity; }
.hero #brand-motion .brand-measure { position:absolute; visibility:hidden; pointer-events:none; white-space:pre; }
.brand-motion-toggle { display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; align-self:end; margin-bottom:12px; border:1px solid transparent; border-radius:4px; background:transparent; color:#a9b5cd; font-size:10px; }
.brand-motion-toggle:hover, .brand-motion-toggle:focus-visible { background:#161c2c90; color:#f4f6fc; }
.brand-motion-toggle:focus-visible { outline:2px solid #82aaff; outline-offset:3px; }
@media(max-width:1100px) {
  .demo-app-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .demo-control-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:620px) {
  .demo-app-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 5px; }
  .demo-app-tile { font-size:10px; padding:10px 4px; min-height:126px; }
  .demo-app-tile>img { width:50px; height:50px; }
  .demo-app-cue { font-size:9px; gap:4px; flex-wrap:wrap; }
  .demo-apps-heading h3 { font-size:20px; overflow-wrap:anywhere; }
  .demo-control-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .demo-control-filters label { min-width:0; }
  .demo-control-filters .demo-control-search { grid-column:1/-1; }
  .demo-control-tabs button { font-size:10px; padding:8px; }
  .demo-control-kpis .sales-kpi strong { font-size:18px; white-space:nowrap; }
  .demo-detail-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .demo-control-dialog { padding:16px; }
  .hero #brand-motion { font-size:42px; }
  .brand-motion-row { max-width:355px; }
  .hero h2 { font-size:25px; }
  .hero-copy { font-size:15px; }
  .hero-bottom { gap:20px; line-height:1.6; }
  .hero-bottom span:last-child { white-space:normal; text-align:right; }
}
@media(max-width:380px) {
  .hero #brand-motion { font-size:36px; }
  .demo-control-kpis { grid-template-columns:1fr; }
  .demo-control-kpis .sales-kpi { min-height:95px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }