/* The demo walkthrough. Self-contained: it carries its own colors, so it looks
   the same on the sales page and inside the app, in light or dark. */
.pp-demo { --d-bg:#0a0a12; --d-s1:#10101c; --d-s2:#16162a; --d-s3:#1e1e36; --d-b:#2a2a46; --d-text:#f3efe6; --d-muted:#a9a9c2; --d-gold:#c9a84c; --d-gold2:#e6cd85; --d-green:#4ea87a; --d-ink:#12121f;
  position:fixed; inset:0; z-index:9800; background:rgba(5,5,12,.88); display:flex; align-items:center; justify-content:center; padding:16px; overflow-y:auto; font-family:'DM Sans',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif; color:var(--d-text); line-height:1.5; }
.pp-demo[hidden] { display:none; }
.pp-demo *, .pp-demo *::before, .pp-demo *::after { box-sizing:border-box; }
body.pp-demo-open { overflow:hidden; }
.dm-panel { width:100%; max-width:760px; background:var(--d-s1); border:1px solid var(--d-b); border-radius:22px; box-shadow:0 30px 90px rgba(0,0,0,.6); display:flex; flex-direction:column; max-height:calc(100vh - 32px); overflow:hidden; }
.dm-top { display:flex; justify-content:space-between; align-items:center; padding:14px 18px 8px; }
.dm-step { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--d-gold); }
.dm-skip { background:none; border:none; color:var(--d-muted); font:inherit; font-size:14px; cursor:pointer; padding:6px 4px; text-decoration:underline; text-underline-offset:3px; }
.dm-skip:hover { color:var(--d-text); }
.dm-stage { padding:6px 18px 4px; overflow-y:auto; flex:1; min-height:300px; display:flex; align-items:center; justify-content:center; }
.dm-cap { padding:12px 24px 6px; text-align:center; }
.dm-cap h2 { font-family:'Playfair Display',Georgia,serif; font-size:24px; font-weight:600; line-height:1.25; margin:0 0 6px; color:var(--d-text); }
.dm-cap p { margin:0 auto; max-width:56ch; font-size:16px; color:var(--d-muted); }
.dm-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px 18px; }
.dm-back, .dm-next-btn { font:inherit; font-size:16px; font-weight:600; border-radius:10px; cursor:pointer; padding:12px 22px; min-width:104px; }
.dm-back { background:none; border:1px solid var(--d-b); color:var(--d-text); }
.dm-back:hover { border-color:var(--d-gold); color:var(--d-gold); }
.dm-next-btn { background:var(--d-gold); border:none; color:var(--d-ink); }
.dm-next-btn:hover { background:var(--d-gold2); }
.dm-dots { display:flex; gap:7px; }
.dm-dots i { width:8px; height:8px; border-radius:50%; background:var(--d-b); }
.dm-dots i.past { background:#6b5a28; } .dm-dots i.on { background:var(--d-gold); transform:scale(1.35); }
.pp-demo button:focus-visible, .pp-demo [role=button]:focus-visible { outline:3px solid var(--d-gold2); outline-offset:2px; }

/* the little app */
.dm-app { width:100%; background:var(--d-bg); border:1px solid var(--d-b); border-radius:14px; overflow:hidden; position:relative; font-size:14px; }
.dm-bar { display:flex; align-items:center; gap:6px; padding:8px 12px; background:var(--d-s2); border-bottom:1px solid var(--d-b); }
.dm-bar i { width:9px; height:9px; border-radius:50%; background:#3a3a58; } .dm-bar span { margin-left:10px; font-size:12px; color:var(--d-muted); }
.dm-nav { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; border-bottom:1px solid var(--d-b); }
.dm-brand { font-family:'Playfair Display',Georgia,serif; color:var(--d-gold); font-size:16px; font-weight:600; white-space:nowrap; }
.dm-pills { display:flex; gap:4px; } .dm-pill { font-size:12px; font-weight:600; color:var(--d-muted); padding:5px 10px; border-radius:999px; border:1px solid transparent; white-space:nowrap; }
.dm-pill.on { color:var(--d-gold); background:rgba(201,168,76,.1); border-color:rgba(201,168,76,.35); }
.dm-body { padding:16px 16px 22px; }
.dm-sample { margin-left:auto; font-style:normal; font-size:11px; font-weight:600; color:var(--d-gold); border:1px solid rgba(201,168,76,.4); border-radius:999px; padding:2px 10px; white-space:nowrap; }
.dm-h { font-family:'Playfair Display',Georgia,serif; font-size:22px; font-weight:600; text-align:center; margin-bottom:4px; line-height:1.25; }
.dm-h.sm { font-size:18px; text-align:left; } .dm-sub { text-align:center; color:var(--d-muted); font-size:13px; margin-bottom:14px; }
.dm-kick { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--d-gold); margin-bottom:6px; }
.dm-find { display:flex; gap:8px; margin:8px 0 12px; } .dm-input { flex:1; min-width:0; background:var(--d-s2); border:2px solid var(--d-b); border-radius:10px; padding:10px 12px; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-chips { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; } .dm-chips span { font-size:12px; color:var(--d-muted); border:1px solid var(--d-b); border-radius:999px; padding:4px 10px; }
.dm-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--d-gold); color:var(--d-ink); font-weight:700; font-size:13px; border-radius:9px; padding:10px 14px; white-space:nowrap; cursor:default; }
.dm-btn.wide { display:flex; width:100%; margin-top:12px; padding:12px; font-size:14px; } .dm-btn.ghost { background:none; color:var(--d-gold); border:1px solid rgba(201,168,76,.4); }
.dm-btn svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.dm-hot { cursor:pointer; box-shadow:0 0 0 0 rgba(230,205,133,.7); animation:dmPulse 1.6s ease-out infinite; }
.dm-hot:hover { background:var(--d-gold2); }
@keyframes dmPulse { 0% { box-shadow:0 0 0 0 rgba(230,205,133,.65); } 70% { box-shadow:0 0 0 12px rgba(230,205,133,0); } 100% { box-shadow:0 0 0 0 rgba(230,205,133,0); } }
.dm-count { font-size:13px; color:var(--d-muted); margin-bottom:10px; } .dm-count b { color:var(--d-gold); }
.dm-card { display:flex; align-items:center; gap:12px; background:var(--d-s2); border:1px solid var(--d-b); border-radius:12px; padding:10px 12px; margin-bottom:8px; } .dm-card.dim { opacity:.55; }
.dm-rank { flex:none; width:58px; text-align:center; } .dm-rank b { display:block; color:var(--d-gold); font-size:15px; } .dm-rank small { display:inline-block; font-size:9px; font-weight:700; color:var(--d-green); border:1px solid rgba(78,168,122,.5); border-radius:999px; padding:1px 6px; letter-spacing:.06em; }
.dm-card-main { flex:1; min-width:0; } .dm-card-main b { display:block; font-size:14px; } .dm-card-main small { display:block; color:var(--d-muted); font-size:12px; }
.dm-tag { display:inline-block; margin-top:4px; font-size:11px; color:var(--d-green); border:1px solid rgba(78,168,122,.5); border-radius:6px; padding:1px 7px; }
.dm-prog { height:8px; background:var(--d-s2); border-radius:999px; overflow:hidden; margin:8px 0 14px; } .dm-prog i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--d-gold),var(--d-gold2)); animation:dmFill 3.4s ease-out forwards; }
@keyframes dmFill { to { width:100%; } }
.dm-steps { list-style:none; margin:0; padding:0; display:grid; gap:7px; } .dm-steps li { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--d-muted); opacity:.35; animation:dmOn .4s forwards; animation-delay:var(--d); }
@keyframes dmOn { to { opacity:1; color:var(--d-text); } }
.dm-tick { flex:none; width:20px; height:20px; border-radius:50%; background:var(--d-s3); display:inline-flex; align-items:center; justify-content:center; animation:dmTickOn .3s forwards; animation-delay:var(--d); } .dm-tick svg { width:12px; height:12px; fill:none; stroke:var(--d-ink); stroke-width:3; opacity:0; animation:dmOn .3s forwards; animation-delay:var(--d); }
.dm-steps li { --d:0s; } .dm-steps li .dm-tick, .dm-steps li .dm-tick svg { animation-delay:inherit; }
@keyframes dmTickOn { to { background:var(--d-green); } }
.dm-note { margin-top:14px; font-size:12px; color:var(--d-muted); text-align:center; }
.dm-ep { background:rgba(201,168,76,.08); border:1px solid rgba(201,168,76,.35); border-radius:12px; padding:12px 14px; margin:10px 0; } .dm-ep b { display:block; font-size:14px; margin-bottom:2px; } .dm-ep span { font-size:13px; color:var(--d-muted); }
.dm-two { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .dm-two > div { background:var(--d-s2); border:1px solid var(--d-b); border-radius:12px; padding:10px 12px; font-size:13px; } .dm-two b { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--d-muted); } .dm-two ul { margin:6px 0 0; padding-left:16px; color:var(--d-text); }
.dm-mail { background:var(--d-s2); border:1px solid var(--d-b); border-radius:12px; padding:10px 12px; margin-bottom:8px; } .dm-mail.dim { opacity:.55; padding:8px 12px; }
.dm-mail-top { display:flex; justify-content:space-between; font-size:13px; } .dm-mail-top span { color:var(--d-muted); font-size:12px; }
.dm-mail-sub { font-size:13px; font-weight:600; margin:6px 0 3px; } .dm-mail-body { font-size:13px; color:var(--d-muted); }
.dm-score { display:flex; justify-content:center; gap:26px; background:linear-gradient(135deg,rgba(201,168,76,.1),transparent 70%),var(--d-s2); border:1px solid rgba(201,168,76,.35); border-radius:14px; padding:12px; margin-bottom:12px; text-align:center; }
.dm-score b { display:block; font-family:'Playfair Display',Georgia,serif; font-size:28px; line-height:1; } .dm-score small { font-size:11px; color:var(--d-muted); } .dm-score .gold b { color:var(--d-gold); }
.dm-next { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; border:2px solid rgba(201,168,76,.5); background:rgba(201,168,76,.06); border-radius:14px; padding:12px 14px; }
.dm-next-t { font-size:15px; } .dm-next small { color:var(--d-muted); font-size:12px; }
.dm-three { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; } .dm-three span { background:var(--d-s2); border:1px solid var(--d-b); border-radius:10px; padding:8px 10px; font-size:13px; font-weight:600; opacity:.7; } .dm-three span.on { opacity:1; border-color:rgba(201,168,76,.5); }
.dm-three i { display:inline-flex; width:20px; height:20px; border-radius:50%; background:var(--d-s3); font-style:normal; font-size:11px; align-items:center; justify-content:center; margin-right:6px; } .dm-three .on i { background:var(--d-gold); color:var(--d-ink); } .dm-three small { display:block; font-weight:400; color:var(--d-muted); font-size:11px; }
.dm-cele { text-align:center; padding:14px 6px 26px; }
.dm-badge { width:60px; height:60px; margin:0 auto 10px; border-radius:50%; background:radial-gradient(circle at 30% 30%,#f1dc9c,var(--d-gold)); color:var(--d-ink); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(201,168,76,.4); animation:dmPop .5s cubic-bezier(.2,1.4,.4,1); }
.dm-badge svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .dm-badge.big { width:84px; height:84px; } .dm-badge.big svg { width:42px; height:42px; stroke-width:2.6; }
@keyframes dmPop { from { transform:scale(.6); opacity:0; } to { transform:scale(1); opacity:1; } }
.dm-cele .dm-h.sm { text-align:center; } .dm-cele .dm-sub { max-width:44ch; margin:6px auto 0; }
.dm-hero { text-align:center; padding:18px 6px; width:100%; }
.dm-flow { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; } .dm-flow span { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:14px; font-weight:600; min-width:70px; } .dm-flow i { width:42px; height:42px; border-radius:50%; background:rgba(201,168,76,.12); border:1px solid rgba(201,168,76,.45); color:var(--d-gold); display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:700; font-size:16px; }
.dm-hero-sub { margin-top:18px; color:var(--d-muted); font-size:14px; }
.dm-cta-row { display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:14px; }
.dm-cta { background:var(--d-gold); border:none; color:var(--d-ink); font:inherit; font-size:18px; font-weight:700; padding:15px 32px; border-radius:12px; cursor:pointer; } .dm-cta:hover { background:var(--d-gold2); }
.dm-again { background:none; border:none; color:var(--d-muted); font:inherit; font-size:14px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
@media (max-width:560px) { .pp-demo { padding:0; align-items:flex-end; } .dm-panel { border-radius:20px 20px 0 0; max-height:96vh; } .dm-cap h2 { font-size:21px; } .dm-cap p { font-size:15px; } .dm-pills .dm-pill:nth-child(3) { display:none; } .dm-two { grid-template-columns:1fr; } .dm-back, .dm-next-btn { min-width:88px; padding:12px 16px; } .dm-score { gap:18px; } }
@media (prefers-reduced-motion:reduce) { .dm-hot, .dm-badge, .dm-prog i, .dm-steps li, .dm-tick, .dm-tick svg { animation:none !important; } .dm-prog i { width:100%; } .dm-steps li { opacity:1; color:var(--d-text); } .dm-tick { background:var(--d-green); } .dm-tick svg { opacity:1; } }