/* css/demo.css */
/* R48 · /demo: interactive tour + book a live walkthrough. Logical properties only (RTL). */
.dm{--dm-ink:var(--ink,#0B0F0D);--dm-mut:var(--text-muted,#56655E);--dm-line:var(--border,#E3E9E6);--dm-acc:var(--accent,#0BC284);--dm-card:var(--surface,#fff);padding-block:clamp(32px,6vw,72px)}
.dm-hero{text-align:center;max-inline-size:860px}
.dm-kicker{display:inline-flex;gap:8px;align-items:center;font-weight:650;font-size:13px;color:var(--dm-acc);border:1px solid var(--dm-line);border-radius:999px;padding:6px 12px}
.dm-h1{font-size:clamp(34px,6vw,60px);line-height:1.05;letter-spacing:-.02em;margin:18px 0 12px}
.dm-h2{font-size:clamp(24px,3.4vw,34px);letter-spacing:-.01em;margin:0}
.dm-sub{font-size:clamp(16px,2vw,19px);color:var(--dm-mut);margin:0 auto 28px;max-inline-size:620px}
.dm-paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.dm-path{display:flex;gap:14px;align-items:center;text-align:start;padding:18px 20px;border-radius:18px;background:var(--dm-ink);color:#fff;text-decoration:none;min-block-size:44px}
.dm-path svg{inline-size:26px;block-size:26px;flex:none}.dm-path small{display:block;opacity:.75}
.dm-path-alt{background:var(--dm-card);color:var(--dm-ink);border:1px solid var(--dm-line)}
.dm-tour{margin-block-start:56px}
.dm-tour-top{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-block-end:14px}
.dm-persona{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.dm-persona-l{font-size:13px;color:var(--dm-mut)}
.dm-chip{min-block-size:36px;padding:0 14px;border-radius:999px;border:1px solid var(--dm-line);background:var(--dm-card);color:var(--dm-ink);font:inherit;font-size:14px;cursor:pointer}
.dm-chip[aria-pressed=true]{background:var(--dm-ink);color:#fff;border-color:var(--dm-ink)}
.dm-progress{block-size:6px;border-radius:6px;background:var(--dm-line);overflow:hidden}.dm-progress span{display:block;block-size:100%;background:var(--dm-acc);transition:inline-size .35s ease}
.dm-dots{display:flex;gap:6px;list-style:none;padding:0;margin:10px 0 16px}.dm-dots li{inline-size:8px;block-size:8px;border-radius:50%;background:var(--dm-line)}.dm-dots li.on{background:var(--dm-acc)}
.dm-stage{border:1px solid var(--dm-line);border-radius:24px;background:var(--dm-card);padding:clamp(16px,3vw,28px);outline-offset:4px;box-shadow:0 24px 60px -30px rgba(11,15,13,.35)}
.dm-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(16px,3vw,36px);align-items:center;animation:dm-in .35s ease}
.dm-step[hidden]{display:none}
@keyframes dm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dm-stepn{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dm-acc)}
.dm-copy h3{font-size:clamp(22px,2.6vw,30px);margin:8px 0 10px}.dm-copy p{color:var(--dm-mut);line-height:1.55}
.dm-for{display:flex;gap:8px;color:var(--dm-ink)!important;background:color-mix(in srgb,var(--dm-acc) 10%,transparent);padding:10px 12px;border-radius:12px}
.dm-for svg{flex:none;color:var(--dm-acc)}
.dm-callouts{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}.dm-callouts li{display:flex;gap:10px;align-items:center;font-size:14px}
.dm-num,.dm-spot span{display:inline-grid;place-items:center;inline-size:24px;block-size:24px;border-radius:50%;background:var(--dm-acc);color:#fff;font-size:12px;font-weight:700;flex:none}
.dm-screen{border:1px solid var(--dm-line);border-radius:16px;overflow:hidden;background:#F6F8F7;color:#0B0F0D;font-size:13px}
.dm-win{display:flex;gap:6px;align-items:center;padding:8px 12px;background:#fff;border-block-end:1px solid #E3E9E6}.dm-win i{inline-size:9px;block-size:9px;border-radius:50%;background:#E3E9E6}.dm-win span{margin-inline-start:8px;color:#8A9690;font-size:11px}
.dm-app{display:grid;grid-template-columns:150px minmax(0,1fr);min-block-size:340px}
.dm-side{background:#0B0F0D;color:#C9D3CE;padding:10px 8px;display:grid;align-content:start;gap:2px}
.dm-side span{display:flex;gap:8px;align-items:center;padding:7px 8px;border-radius:8px;font-size:12px}.dm-side span.on{background:rgba(255,255,255,.1);color:#fff}.dm-side em{font-style:normal}.dm-side svg{inline-size:15px;block-size:15px}
.dm-main{position:relative;padding:14px;display:grid;gap:12px;align-content:start}
.dm-bar{display:flex;justify-content:space-between;align-items:center}.dm-bar b{display:flex;gap:6px;align-items:center}
.dm-av{display:inline-grid;place-items:center;inline-size:28px;block-size:28px;border-radius:50%;background:#0BC284;color:#fff;font-size:11px;font-weight:700}.dm-av.sm{inline-size:24px;block-size:24px;font-size:10px;background:#7C3AED}
.dm-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.dm-kpis div{background:#fff;border-radius:10px;padding:10px;display:grid}.dm-kpis small{color:#56655E}.dm-kpis b{font-size:18px}.dm-kpis em{font-style:normal;color:#059669;font-size:11px}
.dm-quick{display:flex;flex-wrap:wrap;gap:6px}.dm-quick span{display:flex;gap:6px;align-items:center;background:#fff;border:1px solid #E3E9E6;border-radius:999px;padding:6px 10px;font-size:12px}.dm-quick svg{inline-size:14px;block-size:14px}
.dm-list{display:grid;gap:6px}.dm-list div{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;background:#fff;border-radius:10px;padding:8px}.dm-list small{grid-column:2;color:#56655E;font-size:11px}
.dm-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:10px;align-items:start}
.dm-art{min-block-size:220px;position:relative;overflow:hidden;border-radius:12px;background:#fff}.dm-art .hl-art{transform:scale(.8);transform-origin:top center}
.dm-spot{position:absolute;transform:translate(-50%,-50%)}[dir=rtl] .dm-spot{transform:translate(50%,-50%)}
.dm-spot::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #0BC284;animation:dm-pulse 1.8s ease-out infinite}
@keyframes dm-pulse{from{opacity:.9;transform:scale(.8)}to{opacity:0;transform:scale(1.8)}}
.dm-end{display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;padding:30px 0}.dm-end>svg{inline-size:40px;block-size:40px;color:var(--dm-acc)}
.dm-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.dm-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-block-start:14px}.dm-controls .btn{min-block-size:44px}
.dm-hint{font-size:13px;color:var(--dm-mut);text-align:center}
.dm-book{margin-block-start:72px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(20px,4vw,48px);align-items:start}
.dm-book-intro p{color:var(--dm-mut)}.dm-ticks{list-style:none;padding:0;display:grid;gap:10px}.dm-ticks li{display:flex;gap:8px}.dm-ticks svg{color:var(--dm-acc)}
.dm-form,.dm-done{border:1px solid var(--dm-line);border-radius:24px;background:var(--dm-card);padding:clamp(16px,3vw,28px);display:grid;gap:16px}
.dm-done{justify-items:center;text-align:center}.dm-done>svg{inline-size:40px;block-size:40px;color:var(--dm-acc)}.dm-when{font-weight:700;font-size:18px}
.dm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.dm-wide{grid-column:1/-1}
.dm-f{display:grid;gap:6px;font-size:14px;font-weight:600}.dm-f .input{min-block-size:44px;font-weight:400}
.dm-err{color:#DC2626;font-weight:500;font-size:13px}.dm-alert{display:flex;gap:8px;padding:10px 12px;border-radius:12px;background:#FEF2F2;color:#991B1B}
.dm-hp{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
.dm-slots{border:0;padding:0;margin:0;display:grid;gap:12px}.dm-slots legend{font-weight:700;margin-block-end:8px}.dm-slots legend small{font-weight:400;color:var(--dm-mut);margin-inline-start:6px}
.dm-day{display:grid;gap:6px}.dm-day b{font-size:13px}
.dm-times{display:flex;flex-wrap:wrap;gap:6px}
.dm-time input{position:absolute;opacity:0}.dm-time span{display:inline-grid;place-items:center;min-inline-size:72px;min-block-size:44px;border:1px solid var(--dm-line);border-radius:12px;font-size:14px;cursor:pointer}
.dm-time input:checked+span{background:var(--dm-ink);color:#fff;border-color:var(--dm-ink)}.dm-time input:focus-visible+span{outline:2px solid var(--dm-acc);outline-offset:2px}
.dm-consent{display:flex;gap:10px;align-items:flex-start;font-size:14px}.dm-consent input{inline-size:20px;block-size:20px;margin-block-start:2px}
.dm-submit{justify-self:start;min-block-size:48px}.dm-small{font-size:12px;color:var(--dm-mut);margin:0}
@media (max-width:900px){.dm-step{grid-template-columns:1fr}.dm-book{grid-template-columns:1fr}}
@media (max-width:600px){.dm-app{grid-template-columns:44px minmax(0,1fr)}.dm-side em{display:none}.dm-split{grid-template-columns:1fr}.dm-art{display:none}.dm-grid{grid-template-columns:1fr}.dm-hint{display:none}.dm-kpis b{font-size:15px}}
@media (prefers-reduced-motion:reduce){.dm-step,.dm-progress span{animation:none;transition:none}.dm-spot::before{animation:none}}
/* R51: the tour shows the real Weesify dashboard (screenshots of the live app with sample data), not a drawing. */
.dm-real{position:relative;overflow:hidden;background:#fff;border-radius:0 0 16px 16px}
.dm-real img{display:block;inline-size:100%;block-size:auto}
.dm-real .dm-spot,[dir=rtl] .dm-real .dm-spot{transform:translate(-50%,-50%)}