/* ============================================================================
 * nx-katalyst-mock.css — faithful "Katalyst" product-UI mock kit.
 * ----------------------------------------------------------------------------
 * Renders the on-page product "screenshots" for the three Nexlla product
 * landing pages (Website Dashboard · Marketing Suite · Customer Portal) so they
 * visually MATCH the real apps, which all share the Katalyst dark theme:
 * gold #d6b37f on near-black #0b0b12, #15151f cards with hairline borders and
 * no shadow, gold active-nav stripe, the "Ask Nello ⌘K" pill, KPI stat cards
 * and tinted status pills.
 *
 * Dark-only, decorative (mock elements are aria-hidden). Never uses an ad-
 * prefix. Tokens live on .kt-scope (the page wrapper); components read them.
 * ==========================================================================*/
.kt-scope {
    --kt-bg:#0b0b12; --kt-surface:#15151f; --kt-hover:#1d1d2c; --kt-inset:#0f0f17;
    --kt-line:rgba(255,255,255,.06); --kt-line2:rgba(255,255,255,.12);
    --kt-text:#e2e8f0; --kt-strong:#ffffff; --kt-muted:#94a3b8; --kt-dim:#64748b;
    --kt-gold:#d6b37f; --kt-gold-soft:#b89460; --kt-gold-bg:rgba(214,179,127,.16); --kt-on-gold:#1a1408;
    --kt-green:#10b981; --kt-green2:#4ade80; --kt-blue:#3b82f6; --kt-blue2:#60a5fa;
    --kt-indigo:#818cf8; --kt-sky:#38bdf8; --kt-purple:#a78bfa; --kt-orange:#f59e0b; --kt-amber:#fbbf24;
    --kt-red:#ef4444; --kt-red2:#f87171;
    --kt-ui-font:"Satoshi","IBM Plex Sans",-apple-system,Helvetica,Arial,sans-serif;
    --kt-mono:"IBM Plex Mono",ui-monospace,monospace;
}

/* ── Window shell (a product "browser") ─────────────────────────────────── */
.kt-win {
    position:relative; width:100%; border-radius:16px; overflow:hidden;
    background:var(--kt-bg); border:1px solid var(--kt-line2);
    box-shadow:0 40px 90px -40px rgba(0,0,0,.85);
    transition:transform .25s cubic-bezier(.2,.7,.2,1);
    transform-style:preserve-3d; will-change:transform; font-family:var(--kt-ui-font);
}
.kt-topbar { display:flex; align-items:center; gap:9px; height:44px; padding:0 13px; border-bottom:1px solid var(--kt-line); }
.kt-dots { display:flex; gap:6px; }
.kt-dots i { width:9px; height:9px; border-radius:50%; background:var(--kt-line2); }
.kt-dots i:first-child { background:var(--kt-gold); }
.kt-brand { font-weight:800; font-size:12.5px; color:var(--kt-strong); letter-spacing:-.01em; }
.kt-ask {
    margin-left:auto; display:inline-flex; align-items:center; gap:7px; height:25px; padding:0 9px;
    border-radius:999px; border:1px solid rgba(214,179,127,.28); background:rgba(214,179,127,.06);
    color:var(--kt-muted); font-size:10px;
}
.kt-ask .kt-spk { color:var(--kt-gold); font-size:11px; }
.kt-ask kbd { font-family:var(--kt-mono); font-size:8.5px; color:var(--kt-dim); border:1px solid var(--kt-line2); border-radius:4px; padding:1px 4px; background:var(--kt-surface); }
.kt-bell { width:22px; height:22px; border-radius:50%; border:1px solid var(--kt-line); position:relative; flex:none; }
.kt-bell::after { content:""; position:absolute; top:3px; right:3px; width:6px; height:6px; border-radius:50%; background:var(--kt-red); }
.kt-avatar { width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,var(--kt-gold),var(--kt-gold-soft)); color:var(--kt-on-gold); display:grid; place-items:center; font-size:9px; font-weight:800; flex:none; }

.kt-body { display:grid; grid-template-columns:128px 1fr; min-height:312px; }
.kt-side { border-right:1px solid var(--kt-line); padding:11px 8px; display:flex; flex-direction:column; gap:2px; }
.kt-side__t { font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:var(--kt-dim); font-weight:700; padding:9px 8px 4px; }
.kt-nav { display:flex; align-items:center; gap:8px; font-size:10.5px; color:var(--kt-muted); padding:6px 8px; border-radius:8px; text-decoration:none; }
.kt-nav .kt-i { width:13px; height:13px; border:1.5px solid currentColor; border-radius:4px; opacity:.45; flex:none; }
.kt-nav.is-on { background:var(--kt-hover); color:var(--kt-strong); box-shadow:inset -3px 0 0 var(--kt-gold); border-radius:8px 0 0 8px; }
.kt-nav.is-on .kt-i { opacity:.9; border-color:var(--kt-gold); }
.kt-nav--nello { margin-top:auto; color:var(--kt-gold); font-weight:600; }
.kt-nav--nello .kt-i { border:0; opacity:1; }

.kt-main { padding:13px; display:flex; flex-direction:column; gap:10px; }

/* ── Welcome strip ──────────────────────────────────────────────────────── */
.kt-welcome { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:linear-gradient(135deg,#1e1e2e,#15151f); border:1px solid var(--kt-line); }
.kt-ring { width:30px; height:30px; border-radius:50%; padding:2px; background:conic-gradient(from 0deg,var(--kt-gold),transparent 72%); flex:none; }
.kt-ring i { display:block; width:100%; height:100%; border-radius:50%; background:var(--kt-surface); }
.kt-welcome__tx b { color:var(--kt-strong); font-size:12px; }
.kt-welcome__tx span { display:block; color:var(--kt-dim); font-size:9px; }
.kt-role { margin-left:auto; font-size:9px; color:var(--kt-green2); background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.25); border-radius:999px; padding:2px 9px; }

/* ── KPI stat cards ─────────────────────────────────────────────────────── */
.kt-kpis { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.kt-kpi { padding:10px 11px; border:1px solid var(--kt-line); border-radius:12px; background:var(--kt-surface); }
.kt-kpi__top { display:flex; align-items:center; justify-content:space-between; }
.kt-kpi__ic { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:11px; font-weight:800; }
.kt-kpi__ic--gold { background:var(--kt-gold-bg); color:var(--kt-gold); }
.kt-kpi__ic--green { background:rgba(16,185,129,.14); color:var(--kt-green); }
.kt-kpi__ic--blue { background:rgba(59,130,246,.14); color:var(--kt-blue2); }
.kt-kpi__ic--purple { background:rgba(139,92,246,.14); color:var(--kt-purple); }
.kt-kpi__ic--orange { background:rgba(245,158,11,.14); color:var(--kt-amber); }
.kt-kpi__ic--indigo { background:rgba(99,102,241,.14); color:var(--kt-indigo); }
.kt-kpi__ic--red { background:rgba(239,68,68,.14); color:var(--kt-red2); }
.kt-trend { font-size:9px; font-weight:700; color:var(--kt-green2); background:rgba(16,185,129,.12); border-radius:999px; padding:1px 6px; }
.kt-trend--red { color:var(--kt-red2); background:rgba(248,113,113,.12); }
.kt-kpi__l { display:block; margin-top:8px; font-size:8px; letter-spacing:.09em; text-transform:uppercase; color:var(--kt-muted); }
.kt-kpi__v { font-size:20px; font-weight:800; color:var(--kt-strong); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }

/* ── Generic rows / headers ─────────────────────────────────────────────── */
.kt-row { display:flex; align-items:center; justify-content:space-between; gap:9px; font-size:10.5px; color:var(--kt-muted); padding:7px 10px; border:1px solid var(--kt-line); border-radius:9px; background:var(--kt-surface); }
.kt-row b { color:var(--kt-strong); font-weight:600; }
.kt-row .kt-gold { color:var(--kt-gold); font-weight:600; }
.kt-th { display:flex; align-items:center; justify-content:space-between; font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--kt-dim); padding:1px 4px; }

/* ── Status pills ───────────────────────────────────────────────────────── */
.kt-pill { font-size:9px; font-weight:700; border-radius:999px; padding:2px 9px; display:inline-flex; align-items:center; gap:5px; border:1px solid transparent; white-space:nowrap; }
.kt-pill::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.kt-pill--green { color:var(--kt-green2); background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.25); }
.kt-pill--blue { color:var(--kt-blue2); background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.25); }
.kt-pill--indigo { color:var(--kt-indigo); background:rgba(99,102,241,.12); border-color:rgba(99,102,241,.25); }
.kt-pill--purple { color:var(--kt-purple); background:rgba(139,92,246,.12); border-color:rgba(139,92,246,.25); }
.kt-pill--amber { color:var(--kt-amber); background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.25); }
.kt-pill--red { color:var(--kt-red2); background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.25); }
.kt-pill--grey { color:var(--kt-muted); background:rgba(100,116,139,.15); border-color:rgba(100,116,139,.25); }
.kt-pill--gold { color:var(--kt-gold); background:var(--kt-gold-bg); border-color:rgba(214,179,127,.3); }

/* ── Live visitors tile (dashboard) ─────────────────────────────────────── */
.kt-live { padding:12px; border-radius:12px; background:linear-gradient(135deg,#0f3a2a,#0b2620 60%,#15151f); border:1px solid rgba(16,185,129,.25); }
.kt-live__n { font-size:30px; font-weight:800; color:#fff; line-height:1; font-variant-numeric:tabular-nums; }
.kt-live__l { font-size:9px; color:#a7f3d0; letter-spacing:.06em; text-transform:uppercase; }
.kt-sparkbars { display:flex; align-items:flex-end; gap:3px; height:26px; margin-top:9px; }
.kt-sparkbars i { flex:1; background:rgba(110,231,183,.55); border-radius:2px 2px 0 0; }

/* ── Kanban deal pipeline (marketing) ───────────────────────────────────── */
.kt-board { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.kt-col { background:var(--kt-surface); border:1px solid var(--kt-line); border-radius:10px; padding:7px 6px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.kt-col__h { display:flex; align-items:center; gap:5px; font-size:8.5px; font-weight:700; color:var(--kt-text); }
.kt-col__h .kt-d { width:7px; height:7px; border-radius:50%; flex:none; }
.kt-col__h .kt-ct { margin-left:auto; font-size:8px; color:var(--kt-muted); background:rgba(255,255,255,.08); border-radius:999px; padding:0 6px; }
.kt-deal { background:var(--kt-inset); border:1px solid var(--kt-line); border-radius:8px; padding:7px; }
.kt-deal b { display:block; color:var(--kt-strong); font-size:9.5px; }
.kt-deal span { color:var(--kt-dim); font-size:8px; }
.kt-deal--drag { border-color:var(--kt-gold); box-shadow:0 8px 20px -8px var(--kt-gold-bg); transform:rotate(-2deg); }
.kt-score { float:right; font-size:8px; font-weight:800; border-radius:999px; padding:0 6px; }
.kt-score--hot { color:#fca5a5; background:rgba(239,68,68,.16); }
.kt-score--warm { color:#fcd34d; background:rgba(245,158,11,.16); }
.kt-score--cold { color:#cbd5e1; background:rgba(148,163,184,.16); }
.kt-tag { display:inline-block; margin-top:5px; font-size:7.5px; color:var(--kt-indigo); background:rgba(99,102,241,.12); border-radius:999px; padding:1px 6px; }

/* ── Chat bubbles (inbox / nello) ───────────────────────────────────────── */
.kt-chat { display:flex; flex-direction:column; gap:6px; }
.kt-bub { max-width:82%; font-size:10px; padding:7px 10px; border-radius:12px; line-height:1.4; }
.kt-bub--in { align-self:flex-start; background:#1f242f; color:var(--kt-text); border-bottom-left-radius:4px; }
.kt-bub--out { align-self:flex-end; background:var(--kt-gold); color:var(--kt-on-gold); border-bottom-right-radius:4px; font-weight:500; }

/* ── Invoice line items + totals (portal) ───────────────────────────────── */
.kt-inv { border:1px solid var(--kt-line); border-radius:10px; overflow:hidden; }
.kt-inv__li { display:flex; justify-content:space-between; font-size:10px; color:var(--kt-muted); padding:6px 11px; border-bottom:1px solid var(--kt-line); }
.kt-inv__li b { color:var(--kt-text); font-weight:500; }
.kt-inv__tot { display:flex; justify-content:space-between; font-size:10px; padding:5px 11px; color:var(--kt-muted); }
.kt-inv__tot .kt-paid { color:var(--kt-green2); }
.kt-inv__due { display:flex; justify-content:space-between; padding:7px 11px; color:var(--kt-gold); font-weight:800; font-size:12px; border-top:1px solid var(--kt-line); background:rgba(214,179,127,.05); }
.kt-num { font-family:var(--kt-mono); color:var(--kt-gold); }

/* ── Gauge + milestone stages (portal) ──────────────────────────────────── */
.kt-gauge { height:7px; border-radius:4px; background:var(--kt-hover); overflow:hidden; }
.kt-gauge i { display:block; height:100%; border-radius:4px; background:var(--kt-green2); }
.kt-stage { display:flex; align-items:center; gap:8px; font-size:10px; color:var(--kt-muted); padding:5px 2px; }
.kt-stage .kt-d { width:8px; height:8px; border-radius:50%; flex:none; }
.kt-stage--done { color:var(--kt-text); }
.kt-stage--done .kt-txt { text-decoration:line-through; opacity:.72; }

/* ── Files ──────────────────────────────────────────────────────────────── */
.kt-file { display:flex; align-items:center; gap:9px; font-size:10px; color:var(--kt-muted); padding:6px 10px; border:1px solid var(--kt-line); border-radius:8px; }
.kt-file i { width:18px; height:22px; border-radius:3px; background:var(--kt-gold-bg); border:1px solid rgba(214,179,127,.3); flex:none; }

/* ── Pay box (portal) ───────────────────────────────────────────────────── */
.kt-paytabs { display:flex; gap:5px; }
.kt-paytab { flex:1; text-align:center; font-size:9px; color:var(--kt-muted); padding:5px; border:1px solid var(--kt-line); border-radius:7px; }
.kt-paytab.is-on { border-color:var(--kt-gold); color:var(--kt-gold); background:var(--kt-gold-bg); }
.kt-paybtn { text-align:center; font-size:11px; font-weight:700; color:var(--kt-on-gold); background:var(--kt-gold); border-radius:9px; padding:8px; }

/* ── Editor lines (article/template) ────────────────────────────────────── */
.kt-title { font-weight:800; font-size:13px; color:var(--kt-strong); }
.kt-lines span { display:block; height:6px; border-radius:4px; background:var(--kt-line2); margin-bottom:6px; }

/* ── Mini chart ─────────────────────────────────────────────────────────── */
.kt-chart { display:flex; align-items:flex-end; gap:6px; height:60px; padding:2px 0; }
.kt-chart i { flex:1; background:linear-gradient(180deg,var(--kt-gold),rgba(214,179,127,.2)); border-radius:3px 3px 0 0; }

/* ── Floating chips beside the window ───────────────────────────────────── */
.kt-chip { position:absolute; display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px; background:rgba(11,11,18,.92); border:1px solid var(--kt-line2); font-size:11px; color:var(--kt-text); box-shadow:0 12px 30px -12px rgba(0,0,0,.7); backdrop-filter:blur(6px); font-family:var(--kt-ui-font); }
.kt-chip b { color:var(--kt-gold); font-weight:700; }
.kt-chip__dot { width:7px; height:7px; border-radius:50%; background:var(--kt-green2); box-shadow:0 0 0 4px rgba(16,185,129,.18); }

/* ── In-panel mock card (explorer "screenshots") ────────────────────────── */
.kt-card { border:1px solid var(--kt-line); border-radius:12px; background:var(--kt-surface); overflow:hidden; font-family:var(--kt-ui-font); }
.kt-card__bar { display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border-bottom:1px solid var(--kt-line); font-size:10px; color:var(--kt-dim); font-family:var(--kt-mono); }
.kt-card__go { color:var(--kt-on-gold); background:var(--kt-gold); padding:3px 10px; border-radius:6px; font-family:var(--kt-ui-font); font-size:9.5px; font-weight:700; }
.kt-card__live { color:var(--kt-green2); font-family:var(--kt-ui-font); }
.kt-card__in { padding:12px; display:flex; flex-direction:column; gap:8px; }

@media (max-width:920px){ .kt-chip { display:none; } }

/* ══════════════════════════════════════════════════════════════════════════
   SIMULATION STATES — driven by nx-product.js [data-nxplay] timelines.
   Steps carry [data-nx-t]; the player adds .is-play at that time and loops.
   Reduced-motion users get the finished state with no loops.
   ══════════════════════════════════════════════════════════════════════════ */

/* Swap container: first child = resting state; any played sibling replaces it. */
.pt-sw > [data-nx-t] { display:none; }
.pt-sw > [data-nx-t].is-play { display:flex; }
.pt-sw--inline { display:inline-flex; }
.pt-sw--inline > [data-nx-t].is-play { display:inline-flex; }
.pt-sw:has(> .is-play) > :first-child:not(.is-play) { display:none !important; }

/* Chat bubbles appear in sequence; typing indicator has bouncing dots. */
.kt-bub[data-nx-t] { opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease; }
.kt-bub[data-nx-t].is-play { opacity:1; transform:none; }
.kt-bub--typing { display:inline-flex; align-items:center; gap:4px; min-height:18px; }
.kt-bub--typing i { width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.4; animation:ktTy 1s ease-in-out infinite; }
.kt-bub--typing i:nth-child(2) { animation-delay:.16s; }
.kt-bub--typing i:nth-child(3) { animation-delay:.32s; }
@keyframes ktTy { 40% { opacity:1; transform:translateY(-2px); } }

/* Buttons and pills "press" when their step fires. */
.kt-card__go.is-play, .kt-paybtn.is-play, .kt-pill.is-play { animation:ktPop .55s var(--nx-ease-out, ease); }
@keyframes ktPop { 30% { transform:scale(.93); } 65% { transform:scale(1.07); } }

/* KPI cards glow and trend pills pop when their step fires. */
.kt-kpi { transition:border-color .35s ease; }
.kt-kpi[data-nx-t].is-play { border-color:var(--kt-gold); }
.kt-trend[data-nx-t].is-play { animation:ktPop .55s var(--nx-ease-out, ease); }

/* Row treatments: highlight walk, or slide-in appearance. */
.kt-row { transition:border-color .35s ease, background .35s ease; }
.kt-row--hl.is-play { border-color:var(--kt-gold); background:rgba(214,179,127,.07); }
.kt-row--in[data-nx-t] { opacity:0; transform:translateY(7px); transition:opacity .4s ease, transform .4s ease; }
.kt-row--in[data-nx-t].is-play { opacity:1; transform:none; }
.kt-file[data-nx-t] { opacity:0; transform:translateY(7px); transition:opacity .4s ease, transform .4s ease; }
.kt-file[data-nx-t].is-play { opacity:1; transform:none; }

/* Kanban: a deal lifts out of one column and drops into the next. */
.kt-deal--out { transition:opacity .5s ease, transform .5s ease; }
.kt-deal--out.is-play { opacity:.14; transform:translateY(-8px) rotate(-3deg); }
.kt-deal--in[data-nx-t] { opacity:0; transform:translateY(10px) rotate(2deg); transition:opacity .5s ease, transform .5s ease; }
.kt-deal--in[data-nx-t].is-play { opacity:1; transform:none; }

/* Progress gauge fills to its --w target when played. */
.kt-gauge i[data-nx-t] { width:6%; transition:width 1.5s var(--nx-ease-out, ease); }
.kt-gauge i[data-nx-t].is-play { width:var(--w, 68%); }

/* Milestone stages light up as the walk-through reaches them. */
.kt-stage[data-nx-t] { opacity:.42; transition:opacity .4s ease; }
.kt-stage[data-nx-t].is-play { opacity:1; }
.kt-stage[data-nx-t].is-play .kt-d { box-shadow:0 0 0 4px rgba(214,179,127,.16); }

/* Editor lines "type" out to their --w width. */
.kt-lines span[data-nx-t] { width:12%; transition:width .9s var(--nx-ease-out, ease); }
.kt-lines span[data-nx-t].is-play { width:var(--w, 90%); }

/* Charts breathe: bars animate height when re-rolled by [data-nxbars]. */
.kt-chart i, .kt-sparkbars i { transition:height .8s var(--nx-ease-out, ease); }

/* Paid variant for the invoice total strip. */
.kt-inv__due--paid { color:var(--kt-green2); background:rgba(16,185,129,.06); }

/* Played mocks invite a replay click. */
[data-nxplay] { cursor:pointer; }
.kt-card[data-nxplay]:hover { border-color:rgba(214,179,127,.35); }