/* Live takeover demo */

/* --- Section styles --- */
/* <section> */
.demo-01{position:relative;z-index:1;padding:140px clamp(20px,5vw,72px);max-width:1320px;margin:0 auto;box-sizing:border-box;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:56px;align-items:center}
/* <div> */
.demo-02{display:flex;flex-direction:column;gap:22px;max-width:470px}
/* <div> · LIVE TAKEOVER */
.demo-03{font:500 12px 'JetBrains Mono',monospace;letter-spacing:.16em;color:#C9FF35}
/* <h2> · The AI handles the chat. You can */
.demo-04{margin:0;font:500 clamp(34px,4.2vw,56px)/1.04 Geist,sans-serif;letter-spacing:-.05em}
/* <p> · Every conversation shows up in y */
.demo-05{margin:0;font:300 18px/1.6 Geist,sans-serif;color:#b3b8a8;text-wrap:pretty}
/* <div> */
.demo-06{display:flex;flex-wrap:wrap;gap:8px}
/* <span> · Real-time inbox */
.demo-07{padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font:400 12.5px Geist,sans-serif;color:#d4d8ca}
/* <div> */
.demo-08{border-radius:26px;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.025));backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 80px rgba(0,0,0,.45)}
/* <div> */
.demo-09{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
/* <span> · Inbox */
.demo-10{width:20px;height:20px;border-radius:7px 7px 7px 2px;background:#C9FF35}
/* <span> · Inbox */
.demo-11{font:600 14px Geist,sans-serif}
/* <span> · 3 live */
.demo-12{padding:4px 10px;border-radius:999px;background:rgba(201,255,53,.12);color:#C9FF35;font:500 11px Geist,sans-serif}
/* <span> · S */
.demo-13{margin-left:auto;width:28px;height:28px;border-radius:50%;background:#C9FF35;color:#0a0b08;display:flex;align-items:center;justify-content:center;font:600 11px Geist,sans-serif}
/* <div> */
.demo-14{display:flex;flex-wrap:wrap;min-height:470px}
/* <div> */
.demo-15{flex:1 1 190px;display:flex;flex-direction:column;gap:4px;padding:12px;border-right:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.18)}
/* <div> */
.demo-16{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;background:rgba(201,255,53,.1);border:1px solid rgba(201,255,53,.3)}
/* <span> · L */
.demo-17{width:30px;height:30px;flex:none;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font:600 11px Geist,sans-serif;color:#d4d8ca}
/* <div> · Liam */
.demo-18{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
/* <span> · Liam */
.demo-19{font:500 13px Geist,sans-serif}
/* <span> · Custom frame size? */
.demo-20{font:400 12px Geist,sans-serif;color:#7d8374;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* <span> · YOU */
.demo-21{font:500 10px 'JetBrains Mono',monospace;color:#C9FF35}
/* <div> */
.demo-22{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;background:transparent;border:1px solid transparent}
/* <span> · AI */
.demo-23{font:500 10px 'JetBrains Mono',monospace;color:#7d8374}
/* <div> */
.demo-24{flex:3 1 300px;display:flex;flex-direction:column;min-width:0}
/* <div> */
.demo-25{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
/* <div> · Liam */
.demo-26{flex:1;display:flex;flex-direction:column}
/* <span> · Liamnorthpoi */
.demo-27{font:600 13.5px Geist,sans-serif}
/* <span> · northpointbikes.com/trail-x */
.demo-28{font:400 11.5px 'JetBrains Mono',monospace;color:#7d8374}
/* <span> · Take over */
.demo-29{padding:8px 14px;border-radius:999px;background:#C9FF35;color:#0a0b08;font:600 12.5px Geist,sans-serif;box-shadow:0 0 20px rgba(201,255,53,.35)}
/* <div> */
.demo-30{flex:1;display:flex;flex-direction:column;gap:12px;padding:18px 16px}
/* <div> · Liam */
.demo-31{align-self:flex-start;max-width:80%;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
/* <span> · Liam */
.demo-32{font:500 10.5px 'JetBrains Mono',monospace;color:#7d8374}
/* <div> · Do you make the Trail X in a 62c */
.demo-33{padding:10px 13px;border-radius:14px 14px 14px 4px;background:rgba(255,255,255,.08);color:#eef0e6;border:1px solid transparent;font:400 13px/1.5 Geist,sans-serif}
/* <div> · AI */
.demo-34{align-self:flex-end;max-width:80%;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
/* <div> · Stock Trail X frames go up to 58 */
.demo-35{padding:10px 13px;border-radius:14px 14px 4px 14px;background:rgba(201,255,53,.14);color:#eef0e6;border:1px solid rgba(201,255,53,.3);font:400 13px/1.5 Geist,sans-serif}
/* <div> · SARAH TOOK OVER */
.demo-36{align-self:center;display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(201,255,53,.1);border:1px solid rgba(201,255,53,.3);font:500 11px 'JetBrains Mono',monospace;letter-spacing:.06em;color:#C9FF35}
/* <div> · Hi Liam, I’m Sarah from Northpoi */
.demo-37{padding:10px 13px;border-radius:14px 14px 4px 14px;background:#C9FF35;color:#0a0b08;border:1px solid transparent;font:500 13px/1.5 Geist,sans-serif}
/* <div> · Chat saved · AI learned custom f */
.demo-38{align-self:center;font:400 11px 'JetBrains Mono',monospace;color:#7d8374}