
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#f5f4ef;background:#101823;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 70% 40%,#233e4b 0,transparent 48%),#101823}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #8ce9c4;outline-offset:4px}.stage{min-height:100vh;max-width:1240px;margin:auto;display:grid;grid-template-columns:1fr 450px;gap:100px;align-items:center;padding:46px 60px}.brand{font-family:Manrope,sans-serif;font-size:24px;font-weight:800;letter-spacing:-1px}.brand i{display:inline-block;width:12px;height:12px;background:#89e4bd;border-radius:4px;margin-right:10px;box-shadow:0 0 25px #89e4bd40}.eyebrow{margin:48px 0 20px;color:#89e4bd;font-size:11px;letter-spacing:2px;text-transform:uppercase}h1{font-family:Manrope,sans-serif;font-weight:500;font-size:56px;line-height:1.1;letter-spacing:-2.5px;margin:0 0 22px}h1 em{font-style:normal;color:#89e4bd}.lead{max-width:380px;font-size:17px;color:#a8b4bd;line-height:1.7}.chapters{margin:32px 0;display:grid;gap:6px}.chapter{border:0;background:transparent;color:#99aab5;display:flex;align-items:center;gap:15px;padding:12px 14px;text-align:left;border-radius:12px;transition:.3s}.chapter span{font-size:11px;font-variant-numeric:tabular-nums;color:#657987}.chapter.active{color:#fff;background:#ffffff0b}.chapter.active span{color:#89e4bd}.chapter small{margin-left:auto;opacity:.6}.controls{display:flex;gap:10px;align-items:center}.primary{border:0;background:#89e4bd;color:#113d32;border-radius:30px;padding:16px 25px;font-weight:700;min-width:156px}.secondary{width:49px;height:49px;border:1px solid #40535e;color:#d8e2e7;background:transparent;border-radius:50%;font-size:19px}.sound{border:0;color:#a5b6be;background:transparent;font-size:12px;padding:10px}.caption{min-height:64px;margin-top:28px;max-width:400px;font-size:15px;color:#d6e0e3;line-height:1.55}.caption strong{display:block;color:#89e4bd;font-size:10px;letter-spacing:1.5px;margin-bottom:6px;text-transform:uppercase}.progress{height:2px;background:#30434e;margin-top:20px;max-width:390px}.progress div{height:100%;width:0;background:#89e4bd;transition:width .7s}.fine{color:#6c818d;font-size:11px;line-height:1.6;margin-top:16px}.phone-wrap{position:relative;display:grid;place-items:center}.phone{width:390px;height:806px;background:#f5f6f8;border:7px solid #30383f;outline:1px solid #67737b;border-radius:54px;box-shadow:0 45px 110px #0008,0 0 0 3px #0d141a;position:relative;overflow:hidden;color:#172b3d;display:flex;flex-direction:column}.statusbar{height:54px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-size:13px;font-weight:700;background:#fff}.island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:116px;height:30px;background:#0c1015;border-radius:30px;z-index:8}.signals{font-size:11px;letter-spacing:1px}.appbar{height:62px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 21px;border-bottom:1px solid #edf0f2;flex-shrink:0}.appbrand{font-family:Manrope,sans-serif;font-size:21px;font-weight:800;letter-spacing:-.8px}.appbrand b{color:#15957b}.avatar{height:32px;width:32px;border-radius:50%;background:#ecf2f4;color:#657883;display:grid;place-items:center;font-size:11px;font-weight:700}.appbody{flex:1;min-height:0;display:flex;flex-direction:column;padding:18px 15px 0;gap:13px}.context{flex-shrink:0;background:#fff;border:1px solid #e7ecef;border-radius:20px;padding:16px 17px;box-shadow:0 3px 10px #102a3b03;transition:.5s;max-height:235px;overflow:auto;scrollbar-width:none}.kicker{font-size:9px;letter-spacing:1.2px;color:#8a9ba4;font-weight:700;text-transform:uppercase}.context h2{font-family:Manrope,sans-serif;font-size:19px;line-height:1.25;letter-spacing:-.5px;margin:7px 0 5px}.context .meta{font-size:11px;color:#7d8d97}.metrics{display:flex;gap:0;margin-top:15px;border-top:1px solid #edf1f3;padding-top:12px}.metric{flex:1;border-right:1px solid #edf1f3;padding:0 10px}.metric:first-child{padding-left:0}.metric:last-child{border:0}.metric small{display:block;color:#8a9ba4;font-size:9px;margin-bottom:5px}.metric b{display:block;font-size:17px;font-weight:700;letter-spacing:-.5px}.detail{font-size:11px;line-height:1.8;color:#5f7584;margin-top:10px}.detail .row{display:flex;justify-content:space-between;border-bottom:1px solid #f0f3f5;padding:3px 0}.detail .row:last-child{border:0}.action{padding:13px 15px;border:1px solid #c9e8de;background:#e9f6f0;border-radius:16px;flex-shrink:0;transition:.4s}.action .kicker{color:#269074;display:flex;gap:7px;align-items:center}.orb{width:6px;height:6px;border-radius:50%;background:#179c7c;box-shadow:0 0 0 3px #179c7c15}.action p{font-size:12px;line-height:1.5;color:#275b4e;margin:7px 0 0}.action .approve{display:inline-flex;align-items:center;background:#fff9;border:1px solid #bedfcf;border-radius:8px;padding:5px 9px;margin-top:8px;font-size:10px;color:#27745d;font-weight:700}.thread{display:flex;flex-direction:column;flex:1;min-height:0;border-radius:18px 18px 0 0;background:#fff;border:1px solid #e7ecef;border-bottom:0}.threadhead{padding:12px 14px;border-bottom:1px solid #eff2f4;display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;flex-shrink:0}.contact{width:25px;height:25px;border-radius:50%;background:#e8eafb;color:#6975a4;display:grid;place-items:center;font-size:10px}.threadhead small{margin-left:auto;color:#99a6ae;font-weight:400;font-size:9px}.messages{overflow:auto;scroll-behavior:smooth;scrollbar-width:none;padding:12px;flex:1;min-height:0}.bubble{max-width:90%;padding:10px 12px;border-radius:14px 14px 14px 4px;background:#f0f3f6;font-size:12px;line-height:1.45;color:#344b5c;margin:0 0 10px;animation:arrive .5s cubic-bezier(.15,.7,.25,1) both}.bubble.out{background:#255be5;color:#fff;border-radius:14px 14px 4px 14px;margin-left:auto}.bubble.draft{border:1px dashed #9cb0d0;background:#f3f6ff;color:#506481}.bubble .who{font-size:8px;font-weight:700;letter-spacing:.6px;opacity:.6;display:block;margin-bottom:4px}.bubble.system{background:transparent;color:#759083;font-size:10px;margin:8px auto;text-align:center;padding:3px}.typing{padding:11px;display:flex;gap:4px;animation:arrive .3s}.typing i{width:5px;height:5px;background:#a8b6c1;border-radius:50%;animation:bop 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}.voicebar{height:58px;background:#fff;display:flex;align-items:center;justify-content:center;gap:10px;border-top:1px solid #edf1f3;flex-shrink:0;position:relative}.voicebar .wave{display:flex;height:18px;align-items:center;gap:3px}.wave i{width:3px;height:5px;background:#299e81;border-radius:5px}.talking .wave i{animation:wave .7s infinite alternate}.wave i:nth-child(2n){animation-delay:.2s}.wave i:nth-child(3n){animation-delay:.4s}.voicebar span{font-size:10px;color:#7c919d}.home{height:18px;background:#fff;flex-shrink:0;position:relative}.home:after{content:'';width:120px;height:4px;background:#14232c;border-radius:5px;position:absolute;top:4px;left:50%;transform:translateX(-50%)}.notification{position:absolute;top:62px;left:10px;right:10px;z-index:10;background:#fcfdffeb;backdrop-filter:blur(20px);box-shadow:0 8px 35px #16364c30;border:1px solid #fff;border-radius:21px;padding:14px;transform:translateY(-170px);transition:.65s cubic-bezier(.2,.8,.2,1)}.notification.show{transform:translateY(0)}.notification strong{font-size:11px;display:block;margin-bottom:6px}.notification p{font-size:12px;margin:0;color:#4d6272}.phone-glow{position:absolute;width:340px;height:340px;background:#53b89b12;filter:blur(60px);border-radius:50%;z-index:-1}.complete{color:#189879!important}.flash{animation:flash .9s}.play-overlay{position:absolute;inset:54px 0 18px;background:#12283816;backdrop-filter:blur(2px);z-index:6;display:grid;place-items:center;transition:.4s}.play-overlay.hide{opacity:0;pointer-events:none}.play-circle{height:70px;width:70px;border:1px solid #fff8;background:#ffffffdf;box-shadow:0 15px 35px #1238;border-radius:50%;font-size:24px;color:#1b6e59}.screenonly .stage{display:flex;justify-content:center;padding:15px}.screenonly .intro{display:none}.screenonly .phone{box-shadow:none}.screenonly{background:#101823}.screen-btn{position:absolute;bottom:-31px;color:#718e9c;border:0;background:none;font-size:10px}.timing{font-size:11px;color:#7e96a3;margin-top:12px}
@keyframes arrive{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}@keyframes bop{50%{opacity:.3}}@keyframes wave{to{height:18px}}@keyframes flash{40%{background:#d4f4e3;box-shadow:0 0 0 5px #4ed1a522}}@media(min-width:900px) and (max-height:870px){.phone-wrap{transform:scale(.87)}.stage{padding-top:10px;padding-bottom:10px}.eyebrow{margin-top:30px}h1{font-size:48px}.chapters{margin:20px 0}.caption{margin-top:20px}}@media(max-width:850px){.stage{padding:32px 18px 65px;display:flex;flex-direction:column;gap:24px}.intro{width:min(430px,100%)}.eyebrow{margin:25px 0 12px}h1{font-size:39px}.lead{font-size:15px}.chapters{grid-template-columns:1fr 1fr;margin:20px 0;gap:2px}.chapter{font-size:11px;padding:10px 6px;gap:7px}.chapter small{display:none}.caption{display:none}.phone-wrap{width:100%;}.phone{width:min(390px,100%)}.fine{margin-top:10px}.progress{max-width:none}.screenonly .phone{height:calc(100dvh - 30px)}.screenonly .stage{padding:8px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important}}
