/* Interactive product tour — ported from the site-v2 homepage hero.
   Every rule is scoped under #demo so the block cannot collide with, or be
   restyled by, the main site stylesheets. Design tokens are redeclared on
   #demo for the same reason: the block carries its own palette. */
#demo{--font:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--ink-2:#4C5876;--line:#E3E6EE;--line-2:#EEF0F6;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--muted:#6B7690;--paper:#FFFFFF;--primary-soft:#F1F2FE;--primary-text:#5B52E8;--shadow-lg:0 30px 80px -20px rgba(30,36,51,.28);}
#demo .views{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px;padding:0;list-style:none}
#demo .views button{height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
#demo .views button.on{background:var(--primary-soft);border-color:transparent;color:var(--primary-text)}
#demo .views button:hover{border-color:var(--ink-2)}
#demo .frame{container-type:inline-size}
#demo .app{display:grid;grid-template-columns:14.06% minmax(0,1fr);background:#F0F2F4;font-size:.764cqw}
#demo .side-col{position:relative;min-height:100%}
#demo .side{position:absolute;inset:0;padding:1.2em 1.36em 1.36em;display:flex;flex-direction:column;overflow:hidden;font-family:var(--font);color:#384157;user-select:none}
#demo .side[hidden]{display:none}
#demo .lg{display:flex;align-items:center;justify-content:space-between;height:2.3em;margin-bottom:.2em}
#demo .app .lg img{height:2em;width:auto;max-width:none}
#demo .lg i{width:1.9em;height:1.9em;border-radius:50%;border:1px solid #DADDE8;background:#fff;display:inline-grid;place-items:center;color:#4C5876}
#demo .lg i svg{width:1.1em;height:1.1em}
#demo .pills{display:grid;grid-template-columns:1fr 1fr;gap:.45em;margin:.9em 0 .45em}
#demo .pl{height:2.68em;border-radius:.9em;border:.18em solid #E3E6EE;background:#fff;font:inherit;font-size:1em;font-weight:500;color:#384157;display:inline-flex;align-items:center;justify-content:center;gap:.45em;cursor:pointer;padding:0 .4em;line-height:1;white-space:nowrap}
#demo .pl svg{width:1.3em;height:1.3em;flex-shrink:0}
#demo .pl.on{border-color:#777EF5;color:#777EF5}
#demo .pl[aria-disabled]{cursor:default}
#demo .nav,#demo .bottom{display:flex;flex-direction:column;gap:.23em}
#demo .nav{margin-top:.55em}
#demo .bottom{padding-top:.45em}
#demo .nv{display:flex;align-items:center;height:2.41em;padding:.16em;border:0;background:none;font:inherit;font-size:1em;font-weight:500;color:#384157;text-align:left;width:100%;cursor:pointer;border-radius:.73em;line-height:1;position:relative;flex-shrink:0;transition:background .15s;white-space:nowrap}
#demo .nv svg{width:1.45em;height:1.45em;margin:.32em .75em;flex-shrink:0}
#demo .nv:hover{background:#E6E9F2}
#demo .nv.inert{cursor:default}
#demo .nv.inert:hover{background:none}
#demo .nv.on,#demo .nv.on:hover{background:#777EF5;color:#fff}
#demo .nv .badge{position:absolute;right:.9em;top:50%;transform:translateY(-50%);font-style:normal;font-size:.82em;font-weight:700;background:#008183;color:#fff;border-radius:.5em;padding:.32em .45em;line-height:1;font-variant-numeric:tabular-nums}
#demo .nv .chev{margin-left:auto;margin-right:.7em;display:inline-flex;color:#9AA3BC}
#demo .nv .chev svg{width:1em;height:1em;margin:0}
#demo .sep{height:1px;background:#E1E4EC;margin:.5em 0;flex-shrink:0}
#demo .grow{flex:1}
#demo .bal{display:flex;align-items:center;gap:.5em;height:2.64em;padding:.23em .9em .23em .23em;border-radius:.9em;background:rgba(255,255,255,.55);color:#6C47FF;font-weight:600;font-size:1.02em;margin-bottom:.23em;flex-shrink:0}
#demo .bal>svg{width:1.45em;height:1.45em;margin:.3em .5em;color:#384157}
#demo .bal span{flex:1;font-variant-numeric:tabular-nums}
#demo .bal b{width:1.5em;height:1.5em;border-radius:.45em;background:rgba(119,126,245,.18);display:inline-grid;place-items:center;color:#6C47FF}
#demo .bal b svg{width:.9em;height:.9em}
#demo .usr{display:flex;align-items:center;gap:.7em;border:1px solid #DADDE8;border-radius:.9em;padding:.5em .6em;margin-top:.45em;height:4.55em;background:#fff;flex-shrink:0}
#demo .usr i{width:2.9em;height:2.9em;border-radius:.6em;background:linear-gradient(135deg,#8B84FF,#2A3148);flex-shrink:0}
#demo .usr div{min-width:0}
#demo .usr b{display:block;font-size:1.02em;font-weight:600;color:#384157;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#demo .usr span{display:block;font-size:.95em;color:#7D8AAB;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){#demo .app{grid-template-columns:minmax(0,1fr)}#demo .side-col{display:none}}
#demo .pane{position:relative;overflow:hidden;background:#F0F2F4}
#demo .pane .hs{position:absolute;border:0;background:transparent;border-radius:6px;cursor:pointer;padding:0;transition:background .15s,box-shadow .15s}
#demo .pane .hs:hover,#demo .pane .hs:focus-visible{background:rgba(119,126,245,.12);box-shadow:0 0 0 2px rgba(119,126,245,.6);outline:none}
#demo .pane .hs span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#demo .app.full{grid-template-columns:minmax(0,1fr)}
#demo .app.full .side-col{display:none}
#demo .pane img{display:block;width:100%;height:auto;transition:opacity .25s ease}
#demo .pane img.fade{opacity:0}
#demo{margin-top:56px;position:relative}
#demo::before{content:"";position:absolute;inset:-28px;border-radius:32px;background:rgba(119,126,245,.35);filter:blur(46px);z-index:-1}
#demo .frame{border:1px solid var(--line);border-radius:14px;background:var(--paper);box-shadow:var(--shadow-lg);overflow:hidden}
#demo .frame-top{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--line-2);font-size:12px;color:var(--muted);font-family:var(--mono)}
#demo .frame-top .dots{display:flex;gap:6px}
#demo .frame-top .dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}

/* the section that holds it */
.app-tour{padding:0 0 64px}
.app-tour .container{max-width:1180px;margin:0 auto;padding:0 24px}
.app-tour .section-head{text-align:center;margin-bottom:26px}
#demo{margin:0 auto;max-width:1120px}
#demo .views{justify-content:center}
@media (max-width:760px){.app-tour{padding-bottom:44px}.app-tour .container{padding:0 16px}}