/* /how-it-works: the workflow player (public/demo.js) and its product mock screens. Built on the home.css tokens.
   Without JavaScript the steps stack in order; with it they share one grid cell, so switching never moves the page. */

/* ---- player ---- */
.demo-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0 0 20px}
.demo-tabs[hidden]{display:none}
.demo-tabs button{position:relative;display:flex;align-items:center;gap:8px;min-width:0;min-height:52px;padding:10px 12px 14px;border:0;border-radius:14px;background:#f4f4f2;color:var(--soft);font:600 14px/1.2 Inter,sans-serif;text-align:left;cursor:pointer;overflow:hidden;transition:background .2s,color .2s}
.demo-tabs button:hover{background:#ececea;color:var(--ink)}
.demo-tabs button[aria-selected=true]{background:var(--ink);color:#fff}
.demo-tabs button:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.demo-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-n{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--ink);font-size:12px;box-shadow:0 0 0 1px var(--line)}
.demo-tabs [aria-selected=true] .demo-n{background:var(--accent);box-shadow:none}
.demo-tabs .is-done .demo-n{background:#eefbd0;color:var(--accent-ink);box-shadow:none}
.demo-bar{position:absolute;left:12px;right:12px;bottom:6px;height:3px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden;display:none}
.demo-bar:after{content:'';position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.demo.is-playing [aria-selected=true] .demo-bar{display:block}
.demo.is-playing [aria-selected=true] .demo-bar:after{animation:demoFill 11s linear forwards}
.demo.is-held [aria-selected=true] .demo-bar:after{animation-play-state:paused}
@keyframes demoFill{to{transform:scaleX(1)}}

.demo-panels{display:grid}
.demo-step{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,64px);align-items:center;padding:clamp(18px,3vw,32px);border-radius:28px;background:#fbfbfa;box-shadow:0 0 0 1px var(--line)}
.demo-step+.demo-step{margin-top:20px}
.demo.is-live .demo-step{grid-area:1/1;margin:0;visibility:hidden;opacity:0;transition:opacity .35s,visibility 0s .35s}
.demo.is-live .demo-step.is-active{visibility:visible;opacity:1;transition:opacity .35s}

.demo-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:14px;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.demo-kicker span{color:var(--ink)}.demo-kicker span:after{content:"·";margin-left:10px;color:var(--muted)}
.demo-kicker em{font-style:normal;padding:3px 9px;border-radius:999px;background:#eefbd0;color:var(--accent-ink);letter-spacing:.02em;text-transform:none}
.demo-copy h3{font-size:clamp(24px,2.6vw,32px);line-height:1.15;margin-bottom:12px}
.demo-copy>p{color:var(--soft);font-size:17px;line-height:1.6}
.demo-copy .checks{margin-top:18px}

.demo-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:16px}
.demo-foot p{font-size:13px;color:var(--muted)}
.demo-play[hidden]{display:none}

.demo-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:24px}
.demo-split .card h3{margin-bottom:14px}

/* ---- the stage behind each mock screen ---- */
.demo-screen{position:relative;display:grid;place-items:center;min-height:460px;padding:clamp(16px,3vw,32px);border-radius:22px;overflow:hidden;
  background:radial-gradient(circle at 85% 12%,#dcebff 0,rgba(220,235,255,0) 42%),radial-gradient(circle at 10% 92%,#e8f9b8 0,rgba(232,249,184,0) 48%),#f4f5f1}
.mk{width:100%;max-width:400px;display:grid;gap:12px}
.mk-card{background:#fff;border-radius:18px;padding:18px;font-size:14px;line-height:1.45;box-shadow:0 0 0 .5px rgba(18,20,17,.12),0 18px 40px -18px rgba(18,20,17,.3)}
.demo-screen small{display:block;color:var(--muted);font-size:12px}
.mk-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.mk-title{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:8px 0 12px}
.mk-pill{display:inline-block;padding:3px 10px;border-radius:999px;background:#e8f0ff;color:#2a4fa8;font-size:12px;font-weight:600}
.mk-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 12px}
.mk-facts div{padding:8px 10px;border-radius:10px;background:#f6f6f4;min-width:0}
.mk-facts dt{font-size:11px;color:var(--muted)}
.mk-facts dd{margin:1px 0 0;font-weight:600;font-size:13px;overflow-wrap:anywhere}
.mk-quote{margin:0 0 14px;padding:10px 12px;border-left:3px solid var(--accent);border-radius:4px 10px 10px 4px;background:#fafbf6;font-size:13px;color:var(--soft)}
.mk-btn{display:inline-block;padding:9px 16px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:600}
.mk-btn-lime{background:var(--accent);color:#1d2a00}
.mk-ic{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:#eefbd0;color:var(--accent-ink);font-weight:700}
.mk-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#f0a020;box-shadow:0 0 0 4px #fdf0d6}
.mk-nudge,.mk-mail-sm{display:flex;align-items:center;gap:12px;padding:14px 16px}
.mk-nudge b,.mk-mail-sm b{display:block;font-size:14px}

/* step 1: the website on a phone */
.mk-phone{position:relative;width:min(280px,100%);padding:9px;border-radius:36px;background:#141513;box-shadow:0 30px 60px -24px rgba(18,20,17,.45)}
.mk-site{padding:16px 16px 18px;border-radius:28px;background:#fff;font-size:13px}
.mk-sitebar{display:flex;flex-direction:column;align-items:center;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line);text-align:center}
.mk-sitebar b{font-size:14px}.mk-sitebar span{font-size:11px;color:var(--muted)}
.mk-h{font-size:17px;font-weight:600;margin-bottom:10px}
.mk-field{padding:7px 10px;margin-bottom:7px;border:1px solid var(--line);border-radius:10px;color:var(--ink);overflow-wrap:anywhere}
.mk-field small{font-size:10px;margin-bottom:1px}
.mk-msg{font-size:12px;line-height:1.4}
.mk-send{display:block;margin-top:10px;padding:10px;border-radius:999px;background:var(--ink);color:#fff;text-align:center;font-weight:600}
.mk-toast{position:absolute;left:-18px;right:-18px;bottom:-18px;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px) saturate(180%);backdrop-filter:blur(10px) saturate(180%);box-shadow:0 0 0 .5px rgba(18,20,17,.14),0 14px 30px -12px rgba(18,20,17,.35);font-size:13px}
.mk-toast b{display:block}

/* step 3: the AI card */
.mk-aicard{position:relative}
.mk-cardhead{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;margin-bottom:12px}
.mk-ai{display:inline-grid;place-items:center;height:20px;padding:0 7px;border-radius:999px;background:linear-gradient(135deg,#eefbd0,#dcecff);color:#2c3a10;font-size:10px;font-weight:700;letter-spacing:.06em}
.mk-reading{position:absolute;left:18px;top:52px;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;opacity:0}
.mk-spin{width:14px;height:14px;border-radius:50%;border:2px solid #e3e5e0;border-top-color:#86c21a;animation:mkSpin 1s linear infinite}
.mk-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:10px}
.mk-chips div{padding:6px 8px;border-radius:10px;background:#f6f6f4;font-weight:600;font-size:12px;min-width:0;overflow-wrap:anywhere}
.mk-chips small{font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.mk-sum{margin-bottom:10px;font-size:13px}
.mk-draft{margin-bottom:12px;padding:10px 12px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;font-size:12.5px;line-height:1.5}
.mk-draft b{display:block;margin-bottom:4px;font-size:13px}
.mk-draft p{color:var(--soft)}

/* step 4: the lead */
.mk-leadhead{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.mk-leadhead b{display:block;font-size:20px;letter-spacing:-.02em}
.mk-mono{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#eefbd0;color:var(--accent-ink);font-weight:700;font-size:18px}
.mk-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;margin-bottom:12px;border-radius:999px;background:#f2f2ef;font-size:11px;font-weight:600;color:var(--muted);text-align:center}
.mk-stages span{padding:6px 2px;border-radius:999px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-stages .on{background:var(--accent);color:#1d2a00}
.mk-wait{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:9px 12px;border-radius:12px;background:#fff8ea;font-size:13px;font-weight:600}
.mk-activity{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mk-activity li{position:relative;padding-left:16px;font-size:13px}
.mk-activity li:before{content:'';position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* step 5: the conversation */
.mk-thread{display:grid;gap:10px}
.mk-stages-sm{margin-bottom:4px}
.mk-bubble{max-width:88%;padding:10px 12px;border-radius:16px;font-size:13px;line-height:1.45}
.mk-bubble small{margin-bottom:3px;font-size:11px}
.mk-bubble.out{justify-self:end;background:#eefbd0;border-bottom-right-radius:6px}
.mk-bubble.in{justify-self:start;background:#f2f2ef;border-bottom-left-radius:6px}

/* step 6: the booking */
.mk-slot{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:12px;border-radius:14px;background:#f7f7f5}
.mk-slot>span:nth-child(2){flex:1;min-width:0}
.mk-slot b{display:block;font-size:14px}
.mk-time{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--line);line-height:1.1}
.mk-time b{font-size:15px}
.mk-status{display:grid;flex:none}
.mk-status i{grid-area:1/1;padding:4px 10px;border-radius:999px;font-style:normal;font-size:12px;font-weight:600}
.mk-pending{background:#fff1d6;color:#8a5a00}
.mk-confirmed{background:#eefbd0;color:var(--accent-ink);opacity:0}

/* ---- each screen plays its small moment when its step opens (never with reduced motion) ---- */
.demo.is-live .is-active .mk-in-late{animation:mkIn .45s 1.3s both}
.demo.is-live .is-active .mk-reading{animation:mkFlash 1.4s .1s both}
.demo.is-live .is-active .mk-ai-body{animation:mkIn .45s 1.4s both}
.demo.is-live .is-active .mk-pending{animation:mkOut .3s 2.4s forwards}
.demo.is-live .is-active .mk-confirmed{animation:mkIn .3s 2.5s forwards}
.demo.is-live .is-active .mk-confirm-btn{animation:mkPress .3s 2.2s}
@keyframes mkIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes mkOut{to{opacity:0}}
@keyframes mkFlash{0%,100%{opacity:0}15%,80%{opacity:1}}
@keyframes mkPress{50%{transform:scale(.95)}}
@keyframes mkSpin{to{transform:rotate(1turn)}}
.demo:not(.is-live) .mk-pending{display:none}
.demo:not(.is-live) .mk-confirmed{opacity:1}

@media (prefers-reduced-motion:reduce){
  .demo.is-live .is-active :is(.mk-in-late,.mk-reading,.mk-ai-body,.mk-pending,.mk-confirmed,.mk-confirm-btn){animation:none}
  .mk-pending{display:none}.mk-confirmed{opacity:1}.mk-spin{animation:none}
  .demo.is-live .demo-step{transition:none}
}

@media (max-width:900px){
  .demo-step{grid-template-columns:1fr;align-items:start}
  .demo-screen{min-height:0;order:-1}
  .demo-split{grid-template-columns:1fr}
}
@media (max-width:640px){
  .demo-tabs{gap:6px}
  .demo-tabs button{justify-content:center;padding:10px 4px 14px}
  .demo-label{display:none}
  .demo-bar{left:8px;right:8px}
  .demo-step{padding:16px;border-radius:22px}
  .demo-screen{padding:14px;border-radius:18px}
  .mk-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-toast{left:-6px;right:-6px}
  .demo-screen:has(.mk-phone){padding-bottom:34px}
}