/* ============================================================
   Product demos — "How it works" block + mockup primitives.
   Stage is a fixed 560×420 canvas scaled by product-demo.js.
   Accent comes from var(--p) (set on .product-page / .poster).
   ============================================================ */

/* ---------- section ---------- */
.how__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.how__copy { gap: 22px; }
.how__steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.how__step {
  display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; cursor: pointer;
  border: var(--bd) solid var(--line); border-radius: var(--r-lg); background: var(--ink-800);
  transition: border-color .3s, background .3s, transform .3s var(--ease), box-shadow .3s;
}
.how__step:hover { border-color: var(--line-strong); }
.how__step b { display: block; font-size: 1.08rem; letter-spacing: -.01em; }
.how__step p { margin: 4px 0 0; color: var(--fg-dim); font-size: .95rem; line-height: 1.45; }
.how__n {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  font-size: .8rem; font-weight: 700; color: var(--fg-dim); border: 2px solid var(--line-strong);
  transition: background .3s, color .3s, border-color .3s;
}
.how__step.is-on {
  border-color: #000; background: color-mix(in srgb, var(--p) 16%, var(--ink-800));
  transform: translate(-3px, -3px); box-shadow: 5px 5px 0 0 #000;
}
.how__step.is-on .how__n { background: var(--p); color: #0b0a0f; border-color: #000; }
.how__step.is-done .how__n { color: var(--p); border-color: color-mix(in srgb, var(--p) 60%, transparent); }
.how__stage {
  border-radius: var(--r-lg); border: var(--bd-strong) solid #000; box-shadow: var(--shadow-hard-lg);
  background:
    radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--p) 32%, transparent), transparent 60%),
    var(--ink-800);
  padding: clamp(10px, 2vw, 22px); overflow: hidden;
}
@media (max-width: 900px) { .how__grid { grid-template-columns: 1fr; } }

/* ---------- stage ---------- */
.demo-fit { position: relative; width: 100%; overflow: hidden; }
.demo {
  position: absolute; left: 0; top: 0; width: 560px; height: 420px; transform-origin: 0 0;
  color: var(--fg); font-size: 13px; line-height: 1.35; text-align: left;
  --pl: color-mix(in srgb, var(--p) 62%, #fff);     /* accent, readable on dark */
  --pt: color-mix(in srgb, var(--p) 22%, #1b1924);  /* accent tint surface */
}
.demo *, .demo *::before, .demo *::after { box-sizing: border-box; }
.demo-screen { position: absolute; inset: 0; }
.demo-cursor {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -3px 0 0 -3px; z-index: 50; pointer-events: none;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l16 9.5-7 1.6-3.6 6.9z' fill='%23fff' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,.45));
}
.demo-static .demo-cursor { display: none; }

/* ---------- window ---------- */
.dm-win {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 16px; border: 2px solid #000; background: #15131d;
}
.dm-bar {
  height: 34px; flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 0 12px;
  background: #1d1b27; border-bottom: 2px solid #000;
}
.dm-bar i { width: 10px; height: 10px; border-radius: 50%; background: #34313f; }
.dm-bar i:first-child { background: var(--p); }
.dm-bar .dm-url {
  margin-left: 10px; flex: 1; height: 20px; border-radius: 6px; background: #121119; color: rgba(236,234,246,.6);
  font-family: var(--mono); font-size: 10.5px; display: flex; align-items: center; padding: 0 10px;
}
.dm-body { flex: 1; display: flex; min-height: 0; }
.dm-side { width: 132px; flex: 0 0 auto; padding: 12px 10px; border-right: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 4px; }
.dm-brand { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.dm-brand::before { content: "&"; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--p); color: #0b0a0f; border: 1.5px solid #000; font-size: 12px; }
.dm-nav { padding: 6px 9px; border-radius: 8px; color: rgba(236,234,246,.66); font-size: 12px; font-weight: 500; }
.dm-nav.is-on { background: var(--pt); color: #fff; }
.dm-main { flex: 1; position: relative; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dm-row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dm-h { font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.dm-sub { font-family: var(--mono); font-size: 10.5px; color: rgba(236,234,246,.6); }

/* ---------- atoms ---------- */
.dm-card { background: #201e2b; border: 1.5px solid rgba(255,255,255,.08); border-radius: 10px; padding: 9px 11px; }
.dm-card.is-accent { background: var(--pt); border-color: color-mix(in srgb, var(--p) 55%, transparent); }
.dm-list { display: flex; flex-direction: column; gap: 6px; }
.dm-item { display: flex; align-items: center; gap: 9px; }
.dm-item .dm-grow { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-box { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid rgba(255,255,255,.3); flex: 0 0 auto; display: grid; place-items: center; font-size: 10px; color: #0b0a0f; }
.dm-box.is-done { background: var(--p); border-color: #000; }
.dm-chip {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-family: var(--mono); font-size: 10.5px;
  padding: 3px 8px; border-radius: 999px; background: var(--pt); color: var(--pl); border: 1px solid color-mix(in srgb, var(--p) 40%, transparent);
}
.dm-chip.is-ok { background: rgba(102,187,106,.16); color: #9be29b; border-color: rgba(102,187,106,.4); }
.dm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
  padding: 7px 14px; border-radius: 999px; background: var(--p); color: #0b0a0f; font-weight: 700; font-size: 12.5px;
  border: 2px solid #000; box-shadow: 3px 3px 0 0 #000;
}
.dm-btn.is-ghost { background: transparent; color: var(--fg); border-color: rgba(255,255,255,.25); box-shadow: none; }
.dm-field {
  background: #0f0e15; border: 1.5px solid rgba(255,255,255,.14); border-radius: 8px; padding: 8px 10px;
  font-family: var(--mono); font-size: 11.5px; color: #fff; min-height: 32px; white-space: nowrap; overflow: hidden;
}
.dm-field.is-focus { border-color: var(--p); }
.dm-label { font-size: 10.5px; color: rgba(236,234,246,.6); margin-bottom: 4px; font-family: var(--mono); }
.dm-toast {
  position: absolute; right: 14px; bottom: 14px; z-index: 20; display: flex; align-items: center; gap: 9px;
  background: #fff; color: #0b0a0f; border: 2px solid #000; border-radius: 10px; padding: 9px 12px;
  box-shadow: 4px 4px 0 0 #000; font-weight: 700; font-size: 12px; max-width: 300px;
}
.dm-toast small { display: block; font-weight: 500; font-size: 10.5px; color: rgba(11,10,15,.7); }
.dm-toast .dm-dot { width: 26px; height: 26px; border-radius: 8px; background: var(--p); border: 1.5px solid #000; display: grid; place-items: center; flex: 0 0 auto; font-size: 13px; }
.dm-track { height: 7px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.dm-fill { display: block; height: 100%; width: 100%; border-radius: 99px; background: var(--p); }
.dm-av { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #000; display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; color: #0b0a0f; background: var(--p); flex: 0 0 auto; }
.dm-grid { display: grid; gap: 8px; }
.dm-muted { color: rgba(236,234,246,.6); }
.dm-mono { font-family: var(--mono); }
.dm-slot { visibility: hidden; }

/* kanban */
.dm-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: 1; min-height: 0; }
.dm-col { background: #1a1823; border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.dm-col-h { font-family: var(--mono); font-size: 10px; text-transform: uppercase; color: rgba(236,234,246,.6); display: flex; justify-content: space-between; }
.dm-col .dm-card { padding: 8px 9px; font-size: 11.5px; }

/* ---------- Telegram-like chat ---------- */
.dm-chat { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; border: 2px solid #000; background: #17151f; }
.dm-chat-top { height: 54px; flex: 0 0 auto; display: flex; align-items: center; gap: 11px; padding: 0 14px; background: #211f2b; border-bottom: 2px solid #000; }
.dm-ava { width: 34px; height: 34px; border-radius: 50%; background: var(--p); border: 1.5px solid #000; display: grid; place-items: center; flex: 0 0 auto; }
.dm-ava img { width: 19px; height: 19px; }
.dm-chat-name { font-weight: 700; font-size: 14px; }
.dm-chat-sub { font-family: var(--mono); font-size: 10.5px; color: var(--pl); }
.dm-msgs { flex: 1; min-height: 0; padding: 12px 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; }
.dm-out, .dm-in { max-width: 78%; padding: 8px 11px; border-radius: 14px; font-size: 12.5px; border: 1.5px solid #000; }
.dm-out { align-self: flex-end; background: var(--p); color: #0b0a0f; border-bottom-right-radius: 4px; }
.dm-in { align-self: flex-start; background: #2a2836; color: #fff; border-bottom-left-radius: 4px; }
.dm-out.is-link { font-family: var(--mono); font-size: 11px; word-break: break-all; }
.dm-who { font-size: 10.5px; font-weight: 700; color: var(--pl); margin-bottom: 2px; }
.dm-file { display: flex; gap: 10px; align-items: center; }
.dm-cover { width: 50px; height: 50px; border-radius: 9px; border: 1.5px solid #000; flex: 0 0 auto; display: grid; place-items: center; font-weight: 700; font-size: 22px; color: rgba(11,10,15,.8); background: linear-gradient(135deg, #EC407A, var(--p) 55%, #29B6F6); }
.dm-file b { display: block; font-size: 12.5px; line-height: 1.2; }
.dm-file small { display: block; font-family: var(--mono); font-size: 10px; color: rgba(236,234,246,.65); margin-top: 3px; }
.dm-video { width: 150px; height: 190px; border-radius: 10px; border: 1.5px solid #000; position: relative; overflow: hidden; background: linear-gradient(160deg, #FF2D55, #8B80F8 60%, #121119); }
.dm-video::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -11px 0 0 -7px; border-left: 18px solid rgba(255,255,255,.92); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.dm-kb { display: flex; gap: 6px; align-self: flex-start; }
.dm-kb span { padding: 6px 14px; border-radius: 9px; background: #2a2836; border: 1.5px solid rgba(255,255,255,.18); font-size: 12px; font-weight: 700; }
.dm-chat-input { height: 50px; flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 0 10px 0 14px; border-top: 2px solid #000; background: #121119; }
.dm-chat-input .dm-ph { flex: 1; font-family: var(--mono); font-size: 11.5px; color: rgba(236,234,246,.55); white-space: nowrap; overflow: hidden; }
.dm-send { width: 32px; height: 32px; border-radius: 50%; background: var(--p); border: 1.5px solid #000; display: grid; place-items: center; color: #0b0a0f; font-weight: 700; font-size: 15px; flex: 0 0 auto; }

/* ---------- code / API ---------- */
.dm-code {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.6; background: #0f0e15; border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 10px; padding: 10px 12px; white-space: pre; overflow: hidden; color: #ECEAF6;
}
.dm-code .k { color: var(--pl); font-weight: 700; }
.dm-code .s { color: #9be29b; }
.dm-code .n { color: #ffb86b; }
.dm-code .c { color: rgba(236,234,246,.45); }
.dm-method { font-family: var(--mono); font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 5px; background: var(--p); color: #0b0a0f; border: 1.5px solid #000; }
.dm-status { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: #9be29b; }

/* ---------- card preview (catalog mosaic + home carousel), always on ---------- */
.poster__demo {
  position: relative; z-index: 1; flex: 0 0 auto; width: 100%; aspect-ratio: 4 / 3; margin: 2px 0;
  border-radius: 12px; border: 2px solid #000; background: #100f16; overflow: hidden;
  box-shadow: 4px 4px 0 0 rgba(0,0,0,.35); pointer-events: none;
}
.poster__demo .demo-fit { width: 100%; height: 100%; }
/* A card with a live preview carries less text: the description clamps, chips live on the product page. */
.poster[data-demo-card] .poster__desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.poster[data-demo-card] .poster__feats { display: none; }
/* Home carousel: the active card's text is mirrored under the deck, so the card keeps name + preview. */
.deck__card .poster__demo { aspect-ratio: 16 / 10; }
.deck__card[data-demo-card] .poster__desc { display: none; }
/* Phones: the preview is the card's hero, keep it lighter. */
@media (max-width: 700px) {
  .poster__demo { border-radius: 10px; box-shadow: none; }
  .poster__demo .demo-cursor { display: none; }
  .poster[data-demo-card] .poster__desc { -webkit-line-clamp: 3; }
}