/* ══ LIVE PRODUCT MOCKUPS (2026-10-10) ══
       Three cards in route-system's viz column, each playing ONCE on scroll.
       Only transform and opacity animate. The typed answer pins its own height
       before clearing, so nothing reflows.
       The business is INVENTED (Northgate Heating, Edmonton) and every card is
       labelled Example. No counts, no revenue, no testimonials. */
    .mk-stack{display:flex;flex-direction:column;gap:1.1rem}
    .mk{position:relative;background:#fff;border:1px solid var(--border);
      border-radius:var(--radius);box-shadow:var(--shadow),inset 0 1px 0 var(--panel-lip);
      padding:1.05rem 1.15rem 1.15rem;margin:0}
    .mk-bare{padding:0;border:0;box-shadow:none;background:none}
    .mk-top{display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem}
    .mk-k{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
      text-transform:uppercase;font-weight:600;color:var(--muted)}
    .mk-dot{width:6px;height:6px;border-radius:2px;background:var(--accent);flex:none}
    .mk-eg{margin-left:auto;font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;
      text-transform:uppercase;color:var(--faint);border:1px solid var(--border);
      border-radius:5px;padding:.14rem .4rem}
    /* visually hidden, still read aloud */
    .mk-sr{position:absolute;width:1px;height:1px;overflow:hidden;
      clip:rect(0 0 0 0);white-space:nowrap}

    /* A — the AI answer */
    .mk-q{font-size:.82rem;color:var(--muted);margin:0 0 .7rem;font-style:italic}
    .mk-a{font-size:.9rem;line-height:1.55;color:var(--fg);margin:0}
    .mk-cite{display:flex;align-items:center;gap:.4rem;margin:.85rem 0 0;
      font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--accent2);
      opacity:0;transform:translateY(4px);transition:opacity .4s ease-out,transform .4s ease-out}
    .mk[data-mockup=found].is-done .mk-cite{opacity:1;transform:none}

    /* B — the call */
    .mk-live i{width:7px;height:7px;border-radius:50%;background:var(--accent);
      font-style:normal;flex:none}
    .mk-timer{margin-left:.5rem;font-family:var(--mono);font-size:.68rem;
      color:var(--fg-soft);font-variant-numeric:tabular-nums}
    .mk-ans{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
      text-transform:uppercase;color:var(--accent2);margin:0 0 .85rem}
    .mk-line{display:block;font-size:.86rem;line-height:1.5;margin:0 0 .55rem;
      color:var(--fg-soft);opacity:0;transform:translateY(6px);
      transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1)}
    .mk-line.is-in{opacity:1;transform:none}
    .mk-line b{font-weight:600;color:var(--fg)}
    .mk-chip{display:inline-flex;align-items:center;gap:.35rem;margin-top:.5rem;
      font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
      color:var(--accent2);background:rgba(5,150,105,.08);border:1px solid rgba(5,150,105,.2);
      border-radius:5px;padding:.22rem .5rem;opacity:0;transform:translateY(4px);
      transition:opacity .4s ease-out,transform .4s ease-out}
    .mk[data-mockup=call].is-done .mk-chip{opacity:1;transform:none}

    /* C — a lead arriving */
    .app-row--new{opacity:0;transform:translateY(-8px);
      transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
    .app-row--new.is-in{opacity:1;transform:none}

    /* Finished state, immediately, for anyone who asked for no motion. */
    @media(prefers-reduced-motion:reduce){
      .mk-cite,.mk-line,.mk-chip,.app-row--new{opacity:1;transform:none;transition:none}
    }
    @media(max-width:900px){.mk-stack{gap:.9rem}}