/* /Demo page styles — scoped under .demo-page, do not leak into the rest of the site. */
.demo-page{
  --demo-navy:#0f1b33; --demo-navy2:#16233f; --demo-amber:#F2B84B; --demo-cream:#faf6ee;
  --demo-green:#7fc8a9; --demo-text:#e8e6e1; --demo-muted:#9aa3b2;
  background:var(--demo-navy);
  color:var(--demo-text);
  line-height:1.6;
}
.demo-page .demo-wrap{max-width:1080px;margin:0 auto;padding:0 24px;}

/* Hero */
.demo-page .demo-hero{text-align:center;padding:72px 0 40px;}
.demo-page .demo-hero h1{font-size:2.6rem;line-height:1.2;color:var(--demo-cream);}
.demo-page .demo-hero h1 em{color:var(--demo-amber);font-style:normal;}
.demo-page .demo-hero p{margin-top:14px;color:var(--demo-muted);font-size:1.1rem;}

/* Role tabs */
.demo-page .demo-role-q{text-align:center;margin:36px 0 18px;font-size:1.25rem;color:var(--demo-cream);font-weight:600;}
.demo-page .demo-tabs{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.demo-page .demo-tab{background:var(--demo-navy2);border:2px solid transparent;color:var(--demo-text);
     padding:14px 26px;border-radius:14px;cursor:pointer;font-size:1rem;transition:.2s;}
.demo-page .demo-tab small{display:block;color:var(--demo-muted);font-size:.8rem;}
.demo-page .demo-tab.active{border-color:var(--demo-amber);background:#1c2b4d;}
.demo-page .demo-tab:hover{border-color:var(--demo-amber);}

/* Panels */
.demo-page .demo-panel{display:none;margin:40px auto 0;max-width:920px;background:var(--demo-navy2);
       border-radius:20px;padding:36px;box-shadow:0 12px 40px rgba(0,0,0,.35);}
.demo-page .demo-panel.active{display:block;animation:demo-fade .3s ease;}
@keyframes demo-fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.demo-page .demo-panel h2{color:var(--demo-cream);font-size:1.7rem;margin-bottom:6px;}
.demo-page .demo-panel .demo-sub{color:var(--demo-amber);margin-bottom:22px;font-weight:600;}
.demo-page .demo-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:start;}
/* theme.min.css declares a bare `video { position:absolute; inset:0; object-fit:cover }`
   (for hero background videos) — reset it here or the demo videos cover the page. */
.demo-page video{position:static;top:auto;left:auto;height:auto;object-fit:contain;object-position:center;
     width:100%;border-radius:14px;background:#000;display:block;}
.demo-page ul.demo-pains{list-style:none;margin-top:4px;padding-left:0;margin-bottom:0;}
.demo-page ul.demo-pains li{padding:10px 0 10px 34px;position:relative;color:var(--demo-text);}
.demo-page ul.demo-pains li::before{content:"\2715";position:absolute;left:6px;color:#e07a5f;font-weight:700;}
.demo-page .demo-turn{margin-top:14px;padding:14px 18px;background:rgba(127,200,169,.12);
      border-left:4px solid var(--demo-green);border-radius:8px;color:var(--demo-cream);}
.demo-page .demo-turn b{color:inherit;}
.demo-page .demo-cta{display:inline-block;margin-top:22px;background:var(--demo-amber);color:#1a1a1a;
     padding:14px 30px;border-radius:12px;font-weight:700;text-decoration:none;font-size:1.05rem;}
.demo-page .demo-cta:hover{filter:brightness(1.08);color:#1a1a1a;}

/* Trust footer */
.demo-page .demo-trust{text-align:center;margin:56px 0 20px;color:var(--demo-muted);}
.demo-page .demo-trust b{color:var(--demo-green);}
.demo-page .demo-close{text-align:center;padding:26px 0 40px;color:var(--demo-muted);font-size:.9rem;}
.demo-page .demo-close a{color:var(--demo-amber);}

@media(max-width:760px){
  .demo-page .demo-grid{grid-template-columns:1fr;}
  .demo-page .demo-hero h1{font-size:1.9rem;}
}