/* (Codex/GPT) 2026-10-03 · Local, silent phone conversation illustration. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display&display=swap');
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:'DM Sans',sans-serif;color:#233653;background:#fcfbf9}.call-demo{width:1710px;height:1060px;position:relative;display:grid;grid-template-columns:535px 1fr}.phone-side{padding:54px 64px 32px;background:radial-gradient(ellipse at 0 100%,#ead5cd 0,transparent 68%),linear-gradient(150deg,#ece9f3,#e2e7ee);display:flex;align-items:center;flex-direction:column}.brand{width:132px;align-self:flex-start;margin-bottom:42px}.phone-card{width:366px;height:762px;position:relative;background:linear-gradient(165deg,#fff,#f6f4f8);border:7px solid #fff;border-radius:48px;box-shadow:0 25px 65px #23365317,0 0 0 1px #23365309;text-align:center;display:flex;align-items:center;flex-direction:column}.phone-top{width:100%;display:flex;align-items:center;justify-content:space-between;padding:23px 26px;font-size:10px;letter-spacing:2px;font-weight:700;color:#718098}.phone-top>svg{width:20px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5}.signal{display:flex;align-items:flex-end;gap:3px;height:13px}.signal i{width:3px;background:#718098;border-radius:1px;height:5px}.signal i:nth-child(2){height:8px}.signal i:nth-child(3){height:10px}.signal i:nth-child(4){height:13px}.call-avatar{width:104px;height:104px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 2px #59a680,0 0 0 10px #59a68014;margin-top:48px;animation:ring 2.4s ease-in-out infinite}.call-avatar img{width:59px}.phone-card h1{font-size:25px;line-height:1.3;margin:31px 0 8px;letter-spacing:-.5px}.phone-subtitle{font-size:16px;color:#798295;margin:0}.call-clock{font-size:13px;display:flex;gap:6px;align-items:center;color:#788293;margin-top:20px;font-variant-numeric:tabular-nums}.call-clock i,.conversation-eyebrow i{width:7px;height:7px;border-radius:50%;background:#41a375;display:inline-block}.call-clock i{margin-right:3px}.waveform{display:flex;justify-content:center;align-items:center;gap:5px;height:56px;margin-top:37px}.waveform i{width:5px;height:var(--height);border-radius:3px;background:#d98266;animation:wave .65s ease-in-out infinite alternate;animation-delay:var(--delay)}.speaker{font-size:13px;font-weight:600;color:#a55b43;margin:9px 0 28px}.call-person{display:flex;align-items:center;gap:13px;text-align:left;border-top:1px solid #23365313;padding-top:22px;width:252px}.person-avatar{width:42px;height:42px;display:grid;place-items:center;background:#e9e5f1;color:#75698e;border-radius:50%;font-weight:600;font-size:14px}.call-person div>span{display:block;color:#8b93a2;font-size:9px;letter-spacing:1.4px;margin-bottom:5px}.call-person strong{font-size:15px;font-weight:500}.phone-controls{display:flex;align-items:center;gap:29px;margin-top:39px}.phone-controls>span{height:44px;width:44px;border-radius:50%;background:#e8eaf0;display:grid;place-items:center;color:#718098}.phone-controls>span.hangup{width:57px;height:57px;background:#cf796b;color:white}.phone-controls svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.phone-note{font-size:16px;margin:28px 0 0;color:#6d768a}.conversation{padding:60px 67px 32px;position:relative;display:flex;flex-direction:column}.conversation-eyebrow{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:1.7px;font-weight:600;color:#608570}.conversation-eyebrow i{margin-right:8px}.conversation-eyebrow .example{font-size:9px;letter-spacing:1px;color:#969ca5;font-weight:400}.conversation h2{font:400 43px/1.15 'DM Serif Display',Georgia,serif;letter-spacing:-.5px;margin:24px 0 10px}.conversation header>p{font-size:18px;color:#7b8493;margin:0}.transcript{padding:0;margin:28px 0 0;list-style:none;display:flex;flex-direction:column;gap:11px}.turn{position:relative;padding:15px 21px 16px;border-left:3px solid transparent;opacity:0;visibility:hidden;transform:translateY(9px);transition:opacity .35s,transform .35s,background .35s,border-color .35s;border-radius:0 10px 10px 0}.turn.visible{opacity:1;visibility:visible;transform:translateY(0)}.turn.active{background:#f4ece6;border-left-color:#d98266}.turn.caller.active{background:#eeedf4;border-left-color:#9b8caf}.turn-label{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:1.1px;font-weight:700;color:#ba7158;text-transform:uppercase;margin-bottom:7px}.caller .turn-label{color:#817291}.turn-label small{font-size:9px;font-weight:400;color:#97a09e;letter-spacing:.3px}.turn p{font-size:25px;line-height:1.32;margin:0;letter-spacing:-.3px;color:#344259}.word{opacity:0;transition:opacity .18s}.word.spoken{opacity:1}.call-result{margin-top:auto;padding:21px 22px;background:#edf4ef;border:1px solid #d8e7dd;border-radius:13px;display:flex;gap:18px;align-items:center;opacity:0;transform:translateY(8px);transition:.4s}.call-result.visible{opacity:1;transform:translateY(0)}.result-check{width:42px;height:42px;border-radius:50%;background:#dceee2;display:grid;place-items:center;color:#408961;font-size:24px}.call-result div>span{font-size:9px;color:#71917a;font-weight:600;letter-spacing:1.6px}.call-result strong{display:block;font-size:20px;font-weight:600;margin-top:5px}.call-result p{margin:6px 0 0;font-size:14px;color:#7b8b7f}.result-arrow{margin-left:auto;font-size:30px;color:#679171}.conversation footer{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#929aa6;margin-top:22px}.conversation footer>span:last-child{font-size:9px;letter-spacing:1px}.conversation footer b{font-weight:500;margin-left:20px;color:#6a7789}.progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#eee7e1}.progress i{display:block;width:calc(var(--progress,0) * 100%);height:100%;background:#d98266}.call-demo[data-speaker="caller"] .waveform i{background:#9b8caf}.call-demo[data-speaker="caller"] .speaker{color:#817291}.call-demo[data-speaker="complete"] .waveform i{animation-play-state:paused;opacity:.35}.call-demo[data-speaker="complete"] .speaker{color:#408961}.demo-paused .waveform i,.tour-user-paused .waveform i,.demo-paused .call-avatar,.tour-user-paused .call-avatar{animation-play-state:paused}@keyframes wave{from{transform:scaleY(.35)}to{transform:scaleY(1)}}@keyframes ring{50%{box-shadow:0 0 0 2px #59a680,0 0 0 15px #59a68008}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}