/* ═══════════════════════════════════════════════════════════════
   Demo chrome. Only applied when the page is opened with ?demo=1.
   Safe to delete this file and demo.js when the screen ships.
   ═══════════════════════════════════════════════════════════════ */

.demobar{display:none}

body.demo{background:#eef3f6}
body.demo .demobar{
  display:block; position:sticky; top:0; z-index:100;
  background:#142f3d; color:#e8f4fb; border-bottom:1px solid rgba(255,255,255,.08);
}
.demobar-in{
  max-width:1600px; margin:0 auto; padding:13px 22px;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px;
  font-family:Inter,sans-serif; font-size:14px;
}
.demobar-title{display:flex; align-items:baseline; gap:10px; margin-right:auto}
.demobar-title strong{font-family:"DM Sans",sans-serif; font-size:15px; font-weight:700}
.demobar-title span{font-size:12px; color:#94b4c6}

.demogroup{display:flex; align-items:center; gap:9px}
.demogroup > b{
  font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:#94b4c6; white-space:nowrap;
}
.demoseg{display:flex; background:rgba(255,255,255,.07); border-radius:8px; padding:3px; gap:2px}
.demoseg button{
  font-family:inherit; font-size:12.5px; font-weight:500; color:#94b4c6;
  background:none; border:0; padding:6px 11px; border-radius:6px; cursor:pointer; white-space:nowrap;
}
.demoseg button:hover{color:#fff}
.demoseg button[aria-pressed="true"]{background:#55c2ff; color:#06222e; font-weight:600}
.demotoggle{
  font-family:inherit; font-size:12.5px; color:#94b4c6; cursor:pointer;
  background:rgba(255,255,255,.07); border:0; border-radius:8px; padding:8px 13px;
}
.demotoggle:hover{color:#fff}
.demotoggle[aria-pressed="true"]{background:#55c2ff; color:#06222e; font-weight:600}

/* Scaled device preview */
body.demo .stage{
  min-height:0; display:block;
  padding:26px 22px 10px; overflow:hidden;
}
body.demo .screen{
  min-height:0; margin:0 auto;
  background:#fff; border:1px solid #dde5ea; border-radius:12px; overflow:hidden;
  box-shadow:0 1px 2px rgba(20,47,61,.06), 0 14px 36px -10px rgba(20,47,61,.2);
  transform-origin:top center;
}
.demometa{
  max-width:1600px; margin:0 auto; padding:0 22px 34px;
  font-family:Inter,sans-serif; font-size:12px; color:#6b7785;
  display:flex; gap:18px; flex-wrap:wrap; justify-content:center;
  font-variant-numeric:tabular-nums;
}
.demometa b{color:#40505c; font-weight:600}

/* Safe-area overlay on the sponsor slot */
.demosafe{position:absolute; inset:0; z-index:20; pointer-events:none; display:none}
body.demo.safe-on .demosafe{display:block}
.demosafe .zone{
  position:absolute; border:1px dashed rgba(85,194,255,.9); border-radius:4px;
}
.demosafe .zone::after{
  content:attr(data-l); position:absolute; top:-9px; left:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px;
  background:#55c2ff; color:#06222e; padding:1px 6px; border-radius:3px; white-space:nowrap;
}
.demosafe .copy{left:6%; right:6%; top:4%; height:56%}
.demosafe .band{
  left:0; right:0; top:16%; height:0; border:0;
  border-top:1px solid rgba(255,120,90,.95); border-radius:0;
}
.demosafe .band2{
  left:0; right:0; top:84%; height:0; border:0;
  border-top:1px solid rgba(255,120,90,.95); border-radius:0;
}
.demosafe .band::after,.demosafe .band2::after{background:#ff785a; color:#2b0a02; left:14px}