/* The click-through demo (/demo/, templates/tpl-demo.php, assets/js/demo.js).
   Rail of modules, the app screen (a replica, scaled to fit), and the tour card. */
.dm{--dm-rail:200px;--dm-card:330px;background:linear-gradient(var(--bg-alt),#fff 560px);padding-bottom:clamp(48px,6vw,88px)}
.dm .wrap{max-width:1400px}
.dm .btn{flex:none}

/* header */
.dm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:clamp(28px,4vw,52px);padding-bottom:22px}
.dm-head-copy{display:grid;gap:12px;max-width:760px}
.dm-head h1{font-size:clamp(2rem,3.8vw,3.1rem);font-weight:750;text-wrap:balance}
.dm-head .lede{margin:0}
.dm-head-ctas{display:flex;gap:10px;flex-wrap:wrap}
.dm-sample{display:inline-flex;align-items:center;gap:7px;justify-self:start;padding:6px 12px;border-radius:99px;background:#FFF4DE;color:#7A4D00;font-size:13.5px;font-weight:600;border:1px solid #F7DFA8}
.dm-sample .sb-icon{flex:none}

/* layout */
.dm-app{display:grid;grid-template-columns:var(--dm-rail) minmax(0,1fr) var(--dm-card);gap:18px;align-items:start}

/* rail */
.dm-rail{position:sticky;top:88px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:8px}
.dm-rail ul{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:2px}
.dm-mod{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border:0;border-radius:11px;background:none;font:600 14.5px/1.2 var(--fb);color:var(--ink-2);cursor:pointer;text-align:left}
.dm-mod:hover{background:var(--surface-2)}
.dm-mod[aria-current="true"]{background:color-mix(in srgb,var(--k) 12%,#fff);color:var(--ink)}
.dm-mod-ic{width:28px;height:28px;flex:none;border-radius:8px;display:grid;place-items:center;color:var(--k);--ic-accent:var(--k);background:color-mix(in srgb,var(--k) 12%,#fff)}
.dm-mod[aria-current="true"] .dm-mod-ic{background:var(--k);color:#fff;--ic-accent:#fff}
.dm-mod-ic .chipi{width:18px;height:18px}

/* screen tabs */
.dm-main{min-width:0}
.dm-tabs{position:relative;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-bottom:12px;padding:2px}
.dm-tabs::-webkit-scrollbar{display:none}
.dm-tab{flex:none;padding:7px 13px;border-radius:99px;border:1px solid var(--line);background:#fff;font:600 13.5px/1.2 var(--fb);color:var(--ink-2);cursor:pointer;white-space:nowrap}
.dm-tab:hover{border-color:var(--ink-2)}
.dm-tab[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* the stage: one replica at a time, scaled to the stage's width (demo.js sets --dw, --ds and the height) */
.dm-stage{position:relative;border-radius:16px}
.dm-screens{position:relative;height:100%}
.dm-screen{width:var(--dw,100%);transform:scale(var(--ds,1));transform-origin:0 0}
.dm-screen:not(.is-on){display:none}
.dm-js .dm-screen{position:absolute;top:0;left:0;display:block;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s .22s}
.dm-js .dm-screen.is-on{opacity:1;visibility:visible;transition:opacity .22s ease}
.dm .rp{--c:var(--k);box-shadow:0 30px 70px -40px rgba(12,22,56,.45)}
.dm .pd-lead{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--surface-2) 50% 20%/cover no-repeat;font-weight:700;color:var(--ink-2)}
.dm .pd-lead-brand{background:var(--surface-2)}
.dm .pd-lead-brand .sb-brand{color:var(--ink)}
.dm .pd-lead-icon{color:var(--c);--ic-accent:var(--c);background:color-mix(in srgb,var(--c) 13%,#fff)}
.dm .pd-lead-chip{background:#E9EDFF}
.dm .pd-lead-txt{background:color-mix(in srgb,var(--c) 18%,#fff);color:color-mix(in srgb,var(--c) 55%,var(--ink))}

/* hotspot: a ring round the element, a pulsing dot on its corner, the rest of the screen dimmed */
.dm-hot{position:absolute;z-index:3;padding:0;border:0;background:none;cursor:pointer;border-radius:10px;transition:left .25s ease,top .25s ease,width .25s ease,height .25s ease}
.dm-hot[hidden]{display:none}
.dm-ring{position:absolute;inset:-4px;border:2px solid var(--royal);border-radius:12px;box-shadow:0 0 0 9999px rgba(12,22,56,.10)}
.dm-stage{overflow:hidden}
.dm-pulse{position:absolute;top:-9px;right:-9px;width:18px;height:18px;border-radius:50%;background:var(--royal);border:3px solid #fff;box-shadow:0 4px 10px rgba(36,71,245,.45)}
.dm-pulse::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--royal);animation:dm-pulse 1.6s ease-out infinite}
@keyframes dm-pulse{from{transform:scale(1);opacity:.8}to{transform:scale(2.6);opacity:0}}
.dm-hot:hover .dm-ring{border-color:var(--royal-d);box-shadow:0 0 0 9999px rgba(12,22,56,.06)}
.dm-hot:focus-visible{outline:none}
.dm-hot:focus-visible .dm-ring{outline:3px solid color-mix(in srgb,var(--royal) 40%,transparent);outline-offset:3px}

/* the last screen */
.dm-final{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:20px;background:rgba(255,255,255,.93);backdrop-filter:blur(3px);border-radius:16px;text-align:center}
.dm-final[hidden]{display:none}
.dm-final:focus{outline:none}
.dm-final-in{display:grid;gap:14px;justify-items:center;max-width:520px}
.dm-final-chip{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--royal-soft)}
.dm-final h2{font-size:clamp(1.5rem,2.6vw,2.2rem);max-width:none}
.dm-final p{margin:0;color:var(--ink-2)}
.dm-final-ctas{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.dm-final small{color:var(--muted)}
.dm-final-more{font-size:14.5px}

/* tour card */
.dm-card{position:sticky;top:88px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow)}
.dm-tour[hidden],.dm-explore[hidden]{display:none}
.dm-progress{display:grid;gap:8px;margin-bottom:16px}
.dm-count{font-size:12.5px;font-weight:600;color:var(--muted)}
.dm-dots{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.dm-dots li{flex:1;height:4px;border-radius:4px;background:var(--line);transition:background .2s}
.dm-dots li.done{background:color-mix(in srgb,var(--royal) 45%,#fff)}
.dm-dots li.on{background:var(--royal)}
.dm-live{display:grid;gap:8px;min-height:190px;align-content:start}
.dm-when{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--royal)}
.dm-title{font-size:1.32rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;max-width:none}
.dm-title:focus{outline:none}
.dm-text{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.dm-note{font-size:13px;color:var(--muted);background:var(--surface-2);border-radius:9px;padding:7px 10px}
.dm-note[hidden]{display:none}
.dm-nav{display:flex;gap:8px;margin-top:16px}
.dm-nav .btn{flex:1;height:42px;padding:0 12px;font-size:15px;white-space:nowrap}
.dm-nav .btn[disabled]{opacity:.45;cursor:default;transform:none}
.dm-link{padding:0;border:0;background:none;font:600 14px/1.4 var(--fb);color:var(--royal);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dm-link:hover{color:var(--royal-d)}
.dm-skip{display:block;margin:14px auto 0}
.dm-keys{margin:8px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}
.dm-explore h2{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;max-width:none;margin-bottom:6px}
.dm-explore p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.5}
.dm button:focus-visible,.dm a:focus-visible{outline:2px solid var(--royal);outline-offset:2px}

/* narrower: the card goes under the screen */
@media (max-width:1180px){
  .dm-app{grid-template-columns:var(--dm-rail) minmax(0,1fr)}
  .dm-rail{grid-row:span 2}
  .dm-card{grid-column:2;position:static}
  .dm-live{min-height:0}
  .dm-nav{max-width:440px}
}

/* phones: modules scroll sideways, the tour card docks to the bottom */
@media (max-width:760px){
  .dm-app{grid-template-columns:minmax(0,1fr);gap:12px}
  .dm-rail{position:static;grid-row:auto;padding:6px;border-radius:14px;min-width:0}
  .dm-rail ul{display:flex;overflow-x:auto;scrollbar-width:none;gap:4px}
  .dm-rail ul::-webkit-scrollbar{display:none}
  .dm-mod{width:auto;white-space:nowrap;padding:6px 10px 6px 6px;font-size:14px}
  .dm-mod-ic{width:24px;height:24px}
  .dm-head{padding-top:20px;padding-bottom:14px}
  .dm-head-copy{gap:10px}
  .dm-head h1{font-size:1.65rem}
  .dm-head .lede{display:none}
  .dm-head-ctas{display:none}
  .dm-tour{position:relative}
  .dm-skip{position:absolute;top:0;right:0;margin:0;font-size:13px}
  .dm-card{grid-column:auto}
  .dm-nav{max-width:none}
  .dm-app[data-mode="tour"] .dm-card{position:fixed;top:auto;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:60;padding:14px 16px;max-height:52vh;overflow:auto;box-shadow:0 -10px 40px -12px rgba(12,22,56,.35)}
  .dm-app[data-mode="tour"]{padding-bottom:var(--dm-dock,220px)}
  .dm-progress{margin-bottom:10px}
  .dm-title{font-size:1.12rem}
  .dm-text{font-size:14.5px}
  .dm-nav{margin-top:12px}
  .dm-keys{display:none}
  .dm-final{padding:12px}
  .dm-final-in{gap:8px}
  .dm-final-chip{display:none}
  .dm-final h2{font-size:1.2rem}
  .dm-final p{font-size:13.5px}
  .dm-final .btn{height:40px;padding:0 14px;font-size:14px}
  .dm-final small{display:none}
}

@media (prefers-reduced-motion:reduce){
  .dm-pulse::after{animation:none;opacity:0}
  .dm-js .dm-screen,.dm-js .dm-screen.is-on,.dm-hot,.dm-dots li{transition:none}
}

/* the tour is over: the closing screen replaces the card */
.dm-app[data-mode="done"] .dm-card{visibility:hidden}
@media (max-width:760px){
  .dm-app[data-mode="done"] .dm-card{display:none}
  .dm-stage.is-final{height:auto!important}
  .dm-stage.is-final .dm-screens{display:none}
  .dm-stage.is-final .dm-final{position:relative;inset:auto;border:1px solid var(--line);padding:24px 16px}
  .dm-stage.is-final .dm-final-chip{display:grid}
  .dm-stage.is-final .dm-final small{display:block}
}