/* ═══ DORIS rooms: interactive layers (popovers, demos, presentation mode, chat) ═══ */

/* ── popover card anchored over the diorama ── */
.pop { position:absolute; z-index:8; width:min(340px, 80%); background:var(--surface); color:var(--ink); border:1px solid var(--line);
  border-radius:20px; box-shadow:var(--shadow), 0 2px 0 rgba(255,255,255,.4) inset; padding:16px 16px 18px; transform-origin:var(--ox,50%) var(--oy,100%);
  animation:popIn .22s var(--ease-out) both; }
@keyframes popIn { from { opacity:0; transform:scale(.94) translateY(6px); } }
.pop.out { animation:popOut .14s var(--ease-out) forwards; pointer-events:none; } @keyframes popOut { to { opacity:0; transform:scale(.97); } }
.pop h3 { font-size:17px; font-weight:800; display:flex; align-items:center; gap:8px; padding-inline-end:44px; min-height:28px; }
.pop h3 small { font-size:12px; font-weight:700; color:var(--accent); background:var(--accent-soft); padding:2px 8px; border-radius:99px; }
.pop .x-close { all:unset; cursor:pointer; position:absolute; z-index:2; top:8px; inset-inline-end:8px; width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  font:700 18px Rubik, sans-serif; color:var(--ink); background:color-mix(in srgb, var(--ink) 8%, transparent); transition:background-color .15s ease, transform .12s var(--ease-out); }
.pop .x-close::before { content:""; position:absolute; inset:-6px; }
@media (hover:hover) and (pointer:fine) { .pop .x-close:hover { background:color-mix(in srgb, var(--ink) 16%, transparent); } } .pop .x-close:active { transform:scale(.94); }
.pop .x-close:focus-visible { outline:3px solid var(--accent); }
.pop p { font-size:14px; color:var(--text2); line-height:1.55; margin-top:6px; }

/* process steps (home monitor) */
.steps { display:grid; gap:8px; margin-top:12px; counter-reset:s; }
.steps li { list-style:none; display:grid; grid-template-columns:30px 1fr; gap:2px 10px; align-items:center; padding:8px 10px; border-radius:12px; opacity:.35; transition:opacity .3s ease, background-color .3s ease; }
.steps li b { font-size:15px; } .steps li span { grid-column:2; font-size:13px; color:var(--text2); }
.steps li i { grid-row:span 2; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font:800 13px Rubik; font-style:normal; background:var(--accent-soft); color:var(--accent); }
.steps li.done { opacity:1; } .steps li.now { opacity:1; background:var(--accent-soft); }
.steps li.now i { background:var(--accent); color:var(--accent-ink); }

/* principles as sticky notes (home corkboard) */
.notes { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.notes div { position:relative; transition:rotate .25s var(--ease-out), translate .25s var(--ease-out); padding:12px; border-radius:6px; font-size:14px; font-weight:700; color:#2A2318; line-height:1.35; box-shadow:0 8px 16px -10px rgba(0,0,0,.4);
  animation:noteIn .36s cubic-bezier(.34,1.25,.64,1) both; }
.notes div span { display:block; font-weight:500; font-size:12.5px; margin-top:4px; color:#4D4232; }
.notes div:nth-child(1) { background:#FFE47A; rotate:-2deg; } .notes div:nth-child(2) { background:#FFB3C7; rotate:1.5deg; animation-delay:.06s; }
.notes div:nth-child(3) { background:#A9DCFF; rotate:1deg; animation-delay:.12s; } .notes div:nth-child(4) { background:#C6F0A0; rotate:-1.5deg; animation-delay:.18s; }
@keyframes noteIn { from { opacity:0; transform:translate(10px,-10px) rotate(6deg) scale(.92); } }

/* ── service demos ── */
.demo { margin-top:12px; }
.seg { display:inline-flex; background:var(--accent-soft); border-radius:99px; padding:3px; gap:2px; }
.seg button { all:unset; cursor:pointer; font-size:13px; font-weight:700; padding:6px 12px; border-radius:99px; color:var(--text2); }
.seg button[aria-pressed="true"] { background:var(--surface); color:var(--ink); box-shadow:0 2px 8px -4px rgba(0,0,0,.3); }
.seg button:focus-visible { outline:2px solid var(--accent); }
.mini-frame { margin:12px auto 0; border:2px solid var(--ink); border-radius:12px; overflow:hidden; background:#fff; color:#161616; transition:width .4s var(--ease-in-out), height .4s var(--ease-in-out); width:100%; height:170px; }
.mini-frame.mobile { width:44%; height:190px; border-radius:18px; }
.mini-site { font-size:10px; padding:8px; display:grid; gap:6px; height:100%; }
.mini-site nav { display:flex; justify-content:space-between; align-items:center; font-weight:800; }
.mini-site nav i { display:flex; gap:4px; } .mini-site nav i::before, .mini-site nav i::after { content:""; width:18px; height:5px; border-radius:3px; background:#d8d8e8; }
.mini-site .hero { border-radius:8px; background:linear-gradient(135deg,#2448FF,#7F95FF); color:#fff; padding:10px; display:grid; gap:5px; }
.mini-site .hero b { font-size:13px; } .mini-site .hero u { text-decoration:none; background:#FF8A4C; color:#fff; width:max-content; padding:3px 8px; border-radius:5px; font-weight:700; }
.mini-site .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; } .mini-site .cards span { height:26px; border-radius:6px; background:#EEF0FA; }
.mini-frame.mobile .mini-site .cards { grid-template-columns:1fr; } .mini-frame.mobile .mini-site nav i { display:none; }
.dash { display:grid; gap:6px; margin-top:12px; }
.dash .row { display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; padding:8px 10px; border-radius:10px; background:color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); font-size:13px; font-weight:600; }
.dash .chip { font-size:11.5px; font-weight:800; padding:3px 8px; border-radius:99px; }
.dash .chip.ok { background:#DCFCE7; color:#166534; } .dash .chip.due { background:#FFE4D5; color:#9A3412; }
.dash .row button { all:unset; cursor:pointer; font-size:12px; font-weight:700; color:var(--accent); } .dash .row button:focus-visible { outline:2px solid var(--accent); }
.dash .sum { display:flex; justify-content:space-between; font-size:13px; color:var(--text2); padding:2px 4px; } .dash .sum b { color:var(--ink); }
.ba { position:relative; margin-top:12px; height:150px; border-radius:12px; overflow:hidden; border:2px solid var(--ink); user-select:none; }
.ba > div { position:absolute; inset:0; padding:10px; display:grid; gap:5px; align-content:start; font-size:11px; }
.ba .before { background:#F3F3F3; color:#222; } .ba .before span { background:#fff; border:1px solid #bbb; height:14px; } .ba .before em { font-style:normal; color:#c00; font-size:9px; }
.ba .after { background:#fff; color:#161616; clip-path:inset(0 0 0 var(--cut,50%)); }
.ba .after span { background:#F2F4FF; border-radius:7px; height:20px; } .ba .after u { text-decoration:none; background:#2448FF; color:#fff; border-radius:7px; padding:5px; text-align:center; font-weight:700; }
.ba input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; }
.ba .handle { position:absolute; top:0; bottom:0; left:var(--cut,50%); width:3px; background:var(--accent); pointer-events:none; }
.ba .handle::after { content:"⇆"; position:absolute; top:50%; left:50%; translate:-50% -50%; background:var(--accent); color:#fff; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:14px; }
.ba-labels { display:flex; justify-content:space-between; font-size:12px; font-weight:700; color:var(--text2); margin-top:6px; }
.pop .go { all:unset; cursor:pointer; display:inline-flex; margin-top:12px; font-weight:700; font-size:14px; color:var(--accent); }
.pop .go:focus-visible { outline:2px solid var(--accent); }

/* ── presentation mode (works) ── */
.present { position:fixed; inset:0; z-index:40; display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr); gap:clamp(18px,3vw,40px); align-items:center;
  padding:90px clamp(16px,4vw,64px) 40px; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(14px) saturate(1.1); }
.present[hidden] { display:none; }
.present { animation:flyIn .24s var(--ease-out) both; }
.present.closing { animation:presentOut .2s var(--ease-out) forwards; pointer-events:none; }
@keyframes presentOut { to { opacity:0; } }
.present .screen-big { position:relative; aspect-ratio:16/9; border-radius:20px; overflow:hidden; background:#000; box-shadow:0 40px 80px -30px rgba(0,0,0,.55); border:6px solid #1B1B22; }
.present video { width:100%; height:100%; object-fit:cover; display:block; }
.present .tag-sim { position:absolute; bottom:12px; right:12px; font:600 13px Rubik; color:#fff; background:rgba(0,0,0,.55); padding:3px 10px; border-radius:7px; }
.present .card { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:clamp(18px,2.2vw,28px); box-shadow:var(--shadow); max-height:calc(100dvh - 140px); overflow:auto; }
.present .card .num { font-size:13px; font-weight:800; color:var(--accent); }
.present .card h3 { font-size:clamp(26px,2.4vw,36px); font-weight:900; letter-spacing:-.02em; margin-top:4px; }
.present .card .line { font-size:16px; color:var(--text2); margin-top:6px; }
.present .card h4 { font-size:14px; font-weight:800; margin-top:16px; }
.present .card ul { margin:8px 0 0; padding:0 18px 0 0; display:grid; gap:5px; font-size:14.5px; line-height:1.5; }
.present .card p { font-size:14.5px; line-height:1.55; color:var(--text2); margin-top:4px; }
.present .draft { display:inline-block; margin-top:14px; font-size:12px; font-weight:800; color:#9A3412; background:#FFE4D5; padding:3px 9px; border-radius:99px; }
.present .presenter { position:absolute; bottom:-6px; left:-6px; display:flex; align-items:flex-end; gap:8px; z-index:2; }
.present .presenter img { width:84px; height:84px; border-radius:50%; border:4px solid var(--surface); box-shadow:var(--shadow); object-fit:cover; background:#F3EDE3; }
.present .presenter .say { background:var(--surface); color:var(--ink); font-weight:700; font-size:14px; padding:9px 13px; border-radius:16px 16px 16px 4px; box-shadow:var(--shadow); margin-bottom:46px; max-width:260px; }
.present .nav-row { display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }
.present .icon-btn { background:var(--surface); }
.present .closer { position:absolute; top:22px; inset-inline-start:clamp(16px,3.2vw,48px); }
.present .stage-in { animation:flyIn .3s var(--ease-out) both; }
@keyframes flyIn { from { opacity:0; } }

/* ── contact chat ── */
.chat { margin-top:16px; display:grid; align-content:start; gap:8px; max-height:300px; overflow:auto; padding:2px; }
.msg { max-width:85%; padding:10px 13px; border-radius:16px; font-size:15px; line-height:1.45; animation:popIn .2s var(--ease-out) both; }
.msg.bot { transform-origin:100% 100%; background:color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); border-bottom-right-radius:4px; justify-self:start; display:flex; gap:8px; align-items:flex-start; }
.msg.bot img { width:26px; height:26px; border-radius:50%; flex:none; }
.msg.me { transform-origin:0 100%; background:var(--accent); color:var(--accent-ink); border-bottom-left-radius:4px; justify-self:end; }
.msg.typing span { display:inline-block; width:6px; height:6px; margin:0 1px; border-radius:50%; background:var(--text2); animation:dot 1s infinite; }
.msg.typing span:nth-child(2) { animation-delay:.15s; } .msg.typing span:nth-child(3) { animation-delay:.3s; }
@keyframes dot { 50% { translate:0 -4px; opacity:.4; } }
.quick { display:flex; flex-wrap:wrap; gap:6px; }
.quick button { all:unset; cursor:pointer; font-size:14px; font-weight:700; padding:8px 12px; border-radius:99px; border:1px solid var(--accent); color:var(--accent); transition:background-color .15s ease, scale var(--press) var(--ease-out); }
@media (hover:hover) and (pointer:fine) { .quick button:hover { background:var(--accent-soft); } }
.quick button:active, .chat-in button:active, .wa:active, .present .icon-btn:active { scale:.97; }
.chat-in button, .wa { transition:scale var(--press) var(--ease-out); } .quick button:focus-visible { outline:2px solid var(--accent); }
.chat-in { display:flex; gap:8px; margin-top:10px; }
.chat-in input { flex:1; font:500 16px Rubik; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.chat-in input:focus { outline:2px solid var(--accent); }
.chat-in button { all:unset; cursor:pointer; background:var(--accent); color:var(--accent-ink); border-radius:12px; padding:0 16px; font-weight:800; }
.chat-in button:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.wa { display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:800; font-size:15px; padding:12px 18px; border-radius:14px; background:#25D366; color:#062B14; }
.wa svg { width:20px; height:20px; }
.demo-note { font-size:12.5px; color:var(--text2); margin-top:8px; }


@media (max-width:760px) {
  .pop { width:min(320px, 86vw); }
  .present { grid-template-columns:1fr; align-content:start; padding:70px 14px 20px; overflow:auto; gap:14px; }
  .present .card { max-height:none; }
  .present .presenter img { width:58px; height:58px; } .present .presenter .say { margin-bottom:30px; font-size:13px; }
  .chat { max-height:38dvh; }
}

/* UX before/after demo */
.ux { position:relative; margin-top:12px; display:grid; }
.ux-v { grid-area:1/1; border-radius:14px; padding:12px; display:grid; align-content:start; gap:6px; transition:opacity .3s var(--ease-out), transform .3s var(--ease-out), filter .3s var(--ease-out); }
.ux-v label { display:grid; gap:2px; } .ux-v span { display:block; }
.ux-v.before { background:#EFEFEF; color:#333; border:1px solid #C9C9C9; font-size:10.5px; gap:4px; }
.ux-v.before b { font-size:12px; } .ux-v.before span { height:13px; background:#fff; border:1px solid #AAA; }
.ux-v.before em { font-style:normal; color:#C62828; font-size:10px; font-weight:700; } .ux-v.before u { text-decoration:none; background:#BDBDBD; color:#555; width:max-content; padding:3px 10px; font-size:10.5px; }
.ux-v.after { background:#fff; color:#161616; border:2px solid var(--accent); font-size:13px; gap:8px; }
.ux-v.after small { font-size:11px; font-weight:700; color:#2448FF; } .ux-v.after b { font-size:17px; }
.ux-v.after span { height:30px; border-radius:9px; background:#F2F4FF; border:1px solid #D7DCFA; } .ux-v.after i { font-style:normal; font-size:12px; color:#555; }
.ux-v.after u { text-decoration:none; background:#2448FF; color:#fff; border-radius:10px; padding:9px; text-align:center; font-weight:800; }
.ux[data-state="before"] .after, .ux[data-state="after"] .before { opacity:0; transform:scale(.97); filter:blur(4px); pointer-events:none; }
.ux-wins { list-style:none; padding:0; margin:10px 0 0; display:grid; gap:4px; font-size:13px; font-weight:700; color:var(--ink); opacity:.25; transition:opacity .4s; }
.ux-wins li::before { content:"✓ "; color:#16A34A; } .ux-after .ux-wins { opacity:1; }

/* the character's invitation to the next room */
.guide { all:unset; box-sizing:border-box; cursor:pointer; position:absolute; z-index:6; left:50%; bottom:3%; translate:-50% 0; display:flex; align-items:center; gap:10px;
  padding:7px 16px 7px 8px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-weight:800; font-size:15px; white-space:nowrap;
  box-shadow:0 14px 30px -12px var(--accent); animation:guideIn .3s var(--ease-out) both, nudge 2.4s ease-in-out 1s 3; transition:scale var(--press) var(--ease-out); }
.guide:active { scale:.97; }
.guide img { width:34px; height:34px; border-radius:50%; border:2px solid var(--accent-ink); background:#F3EDE3; }
.guide i { font-style:normal; font-size:18px; }
.guide:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
@keyframes guideIn { from { opacity:0; translate:-50% 16px; } }
@keyframes nudge { 50% { translate:calc(-50% - 6px) 0; } }

/* chat header (only visible when the chat is full screen on phones) */
.chat-head { display:none; }
@media (max-width:760px) {
  .chat-wrap.full { display:flex !important; flex-direction:column; position:fixed; top:0; left:0; right:0; height:100dvh; z-index:50; background:var(--surface); padding:12px 14px calc(14px + env(safe-area-inset-bottom)); }
  .chat-wrap.full .chat-head { display:flex; align-items:center; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--line); }
  .chat-wrap.full .chat-head img { width:36px; height:36px; border-radius:50%; } .chat-wrap.full .chat-head b { font-size:17px; }
  .chat-wrap.full .chat-head .icon-btn { margin-inline-start:auto; }
  .chat-wrap.full .chat { flex:1; max-height:none; margin-top:12px; }
  .guide { font-size:13.5px; padding:5px 12px 5px 6px; } .guide img { width:28px; height:28px; }
  /* presentation mode, phone layout: video on top, details scroll below */
  .present { display:flex; flex-direction:column; gap:10px; padding:64px 12px 16px; overflow-y:auto; align-items:stretch; }
  .present .closer { top:10px; inset-inline-start:12px; }
  .present .stage-in { flex:none; }
  .present .screen-big { border-width:3px; border-radius:14px; }
  .present .presenter { position:relative; bottom:auto; left:auto; margin-top:-26px; padding-inline-end:8px; justify-content:flex-start; }
  .present .presenter img { width:52px; height:52px; } .present .presenter .say { margin-bottom:4px; font-size:13px; padding:7px 11px; }
  .present .card { padding:16px; border-radius:18px; flex:none; }
  .present .card h3 { font-size:24px; } .present .card .line { font-size:14.5px; }
  .present .card ul, .present .card p { font-size:14px; } .present .card h4 { margin-top:12px; }
  .present .nav-row .btn { padding:11px 12px; font-size:14px; } .present .nav-row .primary { flex:1; justify-content:center; }
}
@media (max-width:760px) {
  .present .tag-sim { top:8px; bottom:auto; right:8px; font-size:12px; }
  .present .card ul { gap:2px; } .present .card ul, .present .card p { font-size:13.5px; line-height:1.45; } .present .card h4 { margin-top:10px; }
  .present .draft { margin-top:10px; }
}

/* presentation: video ⇄ real-site scroll */
.present .site-scroll { position:absolute; inset:0; overflow:hidden; background:#F4EFE6; }
.present .site-scroll img { width:100%; display:block; will-change:transform; }
.present .screen-tabs { position:absolute; top:12px; left:12px; display:flex; gap:4px; background:rgba(0,0,0,.55); padding:4px; border-radius:99px; z-index:2; }
.present .screen-tabs[hidden], .present .open-site[hidden], .present .site-scroll[hidden], .present video[hidden] { display:none; }
.present .screen-tabs button { all:unset; cursor:pointer; color:#fff; font:700 13px Rubik; padding:6px 12px; border-radius:99px; }
.present .screen-tabs button[aria-pressed="true"] { background:#fff; color:#111; }
.present .screen-tabs button:focus-visible { outline:2px solid #fff; }
.present .open-site { position:absolute; bottom:12px; left:12px; z-index:2; font:700 13px Rubik; color:#111; background:#fff; padding:6px 12px; border-radius:99px; text-decoration:none; }
@media (max-width:760px) { .present .screen-tabs { top:8px; left:8px; } .present .screen-tabs button { font-size:12px; padding:5px 9px; } .present .open-site { bottom:8px; left:8px; font-size:12px; } }

/* ── clickable marks ── */
.mark { position:absolute; z-index:5; translate:-50% -50%; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; padding:8px 10px; }
.mark i { position:relative; width:18px; height:18px; border-radius:50%; background:var(--accent); border:3px solid #fff; transition:box-shadow .2s ease, opacity .2s ease; }
.mark i::after { content:""; position:absolute; inset:-3px; border-radius:50%; background:color-mix(in srgb, var(--accent) 55%, transparent); animation:markPing 1.8s var(--ease-out) infinite; }
.mark b { font:700 14.5px Rubik; color:var(--ink); background:color-mix(in srgb, var(--surface) 94%, transparent); border:1px solid var(--line);
  padding:6px 13px; border-radius:99px; white-space:nowrap; box-shadow:0 6px 14px -8px rgba(0,0,0,.35); transition:background-color .15s ease, color .15s ease, transform .12s var(--ease-out); }
.mark.on b { background:var(--accent); color:var(--accent-ink); border-color:transparent; }
/* hover = 'you can press this' (outlined), selected = solid; the room stops floating under the pointer so the target holds still */
@media (hover:hover) and (pointer:fine) { .hot:hover .mark b { color:var(--accent); border-color:var(--accent); background:var(--surface); }
  .hot:hover .mark.on b { background:var(--accent); color:var(--accent-ink); }
  .stage:has(.hot:hover) .float { animation-play-state:paused; } }
.hot:active .mark b { transform:scale(.96); }
.mark.on i { box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 30%, transparent); }
.mark.on i::after, .mark.seen i::after { animation:none; opacity:0; }
.mark.seen:not(.on) i { opacity:.75; }
@keyframes markPing { from { transform:scale(1); opacity:.85; } 80%, to { transform:scale(2.3); opacity:0; } }
/* coach tip */
.coach { position:absolute; z-index:7; left:50%; top:3%; translate:-50% 0; background:var(--ink); color:var(--surface); font:700 14px Rubik; padding:8px 14px; border-radius:99px;
  box-shadow:var(--shadow); animation:popIn .22s var(--ease-out) both; transition:opacity .3s var(--ease-out), translate .3s var(--ease-out); white-space:nowrap; }
.coach.bye { opacity:0; translate:-50% -8px; }
.hint .tap-ico { display:inline-block; animation:tap 1.6s ease-in-out infinite; }
@keyframes tap { 50% { translate:0 -3px; } }
@media (max-width:760px) {
  .mark { padding:5px 8px; gap:4px; } .mark i { width:15px; height:15px; border-width:2px; } .mark b { font-size:12.5px; padding:4px 10px; }
  .content .hint { margin-top:8px; font-size:13px; color:var(--text2); }
  .coach { font-size:12.5px; padding:6px 12px; }
}
.present .open-site { bottom:auto; left:auto; top:12px; right:12px; }
@media (max-width:760px) { .present .open-site { top:8px; right:8px; } .present .tag-sim { top:auto; bottom:8px; } }
@media (max-width:760px) { .coach { top:auto; bottom:4%; } }

/* phones: the mobile site scrolls inside a phone-shaped frame */
@media (max-width:760px) {
  .present .screen-big.phone { aspect-ratio:9/17; width:min(62vw, 250px); margin:0 auto; border-radius:30px; border-width:7px; }
  .present .screen-big.phone .screen-tabs { top:auto; bottom:10px; left:50%; translate:-50% 0; }
  .present .screen-big.phone .open-site { top:10px; right:50%; translate:50% 0; }
  .present .screen-big.phone .tag-sim { display:none; }
}
.present .screen-tabs button, .present .open-site { white-space:nowrap; }

/* never let a white page edge show behind the UI (iOS keyboard panning) */
html { background:var(--bg); }
html.chat-on, html.chat-on body { background:var(--surface); }
@media (max-width:760px) { .chat-wrap.full { padding-bottom:10px; } .chat-wrap.full .demo-note { margin-top:6px; } }

/* services: the guiding cursor (white arrow with an ink outline reads on both themes) */
.ghost-cursor { position:fixed; left:0; top:0; z-index:60; width:26px; height:26px; pointer-events:none; opacity:0; transition:opacity .22s var(--ease-out); will-change:transform; }
.ghost-cursor.on { opacity:1; }
.ghost-cursor svg { width:26px; height:26px; display:block; fill:#fff; stroke:#14162e; stroke-width:1.6; stroke-linejoin:round; filter:drop-shadow(0 3px 6px rgba(0,0,0,.35)); transform-origin:4px 3px; transition:transform .13s var(--ease-out); }
.ghost-cursor i { position:absolute; left:-14px; top:-14px; width:32px; height:32px; border-radius:50%; border:2px solid var(--accent); opacity:0; transform:scale(.4); }
.ghost-cursor.press svg { animation:ghost-press .26s var(--ease-out); }
.ghost-cursor.press i { animation:ghost-ring .5s var(--ease-out); }
@keyframes ghost-press { 40% { transform:scale(.84); } }
@keyframes ghost-ring { 0% { opacity:.9; transform:scale(.4); } 100% { opacity:0; transform:scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .ghost-cursor { display:none; } }

/* ── popup polish (2026-10-06) ── */
/* sticky notes: each one gets pinned as it lands; a pointer straightens and lifts it */
.notes div::before { content:""; position:absolute; top:-5px; left:50%; width:10px; height:10px; margin-left:-5px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #FF8A8A, #D33 70%); box-shadow:0 2px 3px rgba(0,0,0,.35); animation:pinIn .22s var(--ease-out) both; }
.notes div:nth-child(1)::before { animation-delay:.3s; } .notes div:nth-child(2)::before { animation-delay:.36s; }
.notes div:nth-child(3)::before { animation-delay:.42s; } .notes div:nth-child(4)::before { animation-delay:.48s; }
@keyframes pinIn { from { opacity:0; transform:translateY(-6px) scale(1.4); } }
@media (hover:hover) and (pointer:fine) { .notes > div:hover { rotate:0deg; translate:0 -3px; } }
/* process: a line joins the steps and fills as they light up; finished steps get a check; then it goes live */
.steps { position:relative; --p:0; }
.steps::before, .steps::after { content:""; position:absolute; top:26px; bottom:26px; inset-inline-start:24px; width:2px; border-radius:2px; background:var(--accent-soft); }
.steps::after { background:var(--accent); transform-origin:50% 0; transform:scaleY(var(--p)); transition:transform .5s var(--ease-out); }
.steps li { position:relative; z-index:1; }
.steps li i { background:color-mix(in srgb, var(--accent) 14%, var(--surface)); transition:background-color .25s ease, color .25s ease, scale .25s var(--ease-out); }
.steps li.now i { scale:1.08; }
.steps li.done i { background:var(--accent); color:var(--accent-ink); font-size:0; }
.steps li.done i::after { content:"✓"; font-size:15px; }
.launch { margin-top:12px; text-align:center; font-weight:800; font-size:15px; color:var(--ok); background:color-mix(in srgb, var(--ok) 14%, var(--surface));
  border-radius:12px; padding:8px; opacity:0; translate:0 6px; transition:opacity .3s var(--ease-out), translate .3s var(--ease-out); }
.launched .launch { opacity:1; translate:0 0; }
/* systems: the paid count ticks and a meter fills */
.dash .meter { height:6px; border-radius:6px; background:var(--accent-soft); overflow:hidden; }
.dash .meter i { display:block; height:100%; background:var(--ok); transform-origin:100% 50%; transform:scaleX(var(--n)); transition:transform .5s var(--ease-out); }
.dash .chip.just { animation:chipPop .3s var(--ease-out); }
.dash .row.just { animation:rowFlash .7s ease-out; }
.dash .paid.tick { display:inline-block; animation:countUp .25s var(--ease-out); }
@keyframes chipPop { from { scale:.85; } }
@keyframes rowFlash { from { background:color-mix(in srgb, var(--ok) 22%, var(--surface)); } }
@keyframes countUp { from { opacity:0; translate:0 6px; } }
/* websites: the little page scrolls by itself inside its frame (pauses under the pointer) */
.mini-frame { --fh:166px; } .mini-frame.mobile { --fh:186px; }
.mini-site { height:auto; animation:siteScroll 10s var(--ease-in-out) 1.4s infinite alternate; }
.mini-site .strip { display:grid; grid-template-columns:2fr 1fr; gap:5px; } .mini-site .strip span { height:34px; border-radius:6px; background:#F3F4FB; }
.mini-site .foot { height:22px; border-radius:6px; background:#1A1712; opacity:.85; }
.mini-frame.mobile .mini-site .strip { grid-template-columns:1fr; }
@keyframes siteScroll { 0%, 18% { transform:translateY(0); } 82%, 100% { transform:translateY(min(0px, calc(var(--fh) - 100%))); } }
@media (hover:hover) and (pointer:fine) { .mini-frame:hover .mini-site { animation-play-state:paused; } }
.dash .row button[hidden] { display:none; }   /* all:unset above would otherwise show "mark as paid" on rows already paid */