.phone-example{width:min(100%,410px);margin:0 auto;position:relative;--phone-ink:#DCE7EC}
.phone-frame{position:relative;border:1px solid #52616A;border-radius:37px;padding:12px 10px 8px;background:#101820;color:var(--phone-ink);box-shadow:0 24px 65px -35px rgba(0,0,0,.7);text-align:left}
.phone-status{height:27px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font:500 .65rem Inter,sans-serif;color:#D9E2E7;position:relative}.phone-speaker{width:65px;height:5px;background:#03090D;position:absolute;left:50%;top:5px;transform:translateX(-50%);border-radius:5px}.phone-battery{width:19px;height:8px;border:1px solid #9EB1BA;border-radius:2px;position:relative}.phone-battery:before{content:'';position:absolute;left:2px;top:1px;bottom:1px;right:4px;background:#9EB1BA}.phone-battery:after{content:'';position:absolute;right:-3px;top:2px;width:2px;height:3px;background:#9EB1BA}
.phone-conversation{display:flex;align-items:center;gap:12px;padding:17px 15px 20px;border-bottom:1px solid #293740}.phone-conversation img{background:#172630;border:1px solid #2D414D;border-radius:50%;padding:6px}.phone-conversation strong{display:block;font:600 .9rem Inter,sans-serif;letter-spacing:.01em}.phone-conversation div>span{font:.69rem Inter,sans-serif;color:#93A8B3;display:block;margin-top:4px}.phone-contact-dot{width:5px;height:5px;border-radius:50%;background:#5FA8B8;margin-left:auto;margin-right:5px}
.phone-messages{padding:0 10px 7px;background:radial-gradient(ellipse at 0 45%,rgba(37,77,86,.11),transparent 70%)}
.message-date{text-align:center;font-size:.64rem!important;line-height:1.5!important;color:#91A3AD;margin:14px 0 17px!important}
.phone-message{position:relative;background:#1A2933;border:1px solid #2A3B46;border-radius:13px 13px 13px 3px;padding:13px 14px 22px;margin:0 16px 12px 0;transform:none;opacity:1}
.phone-message h3{font:550 .78rem/1.45 Inter,sans-serif;color:#ECD0AB;letter-spacing:0;margin:0 0 7px;display:flex;gap:7px;align-items:center}.message-marker{font:.6rem 'JetBrains Mono',monospace;color:#8DB7C1;display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px;border:1px solid #48606A;border-radius:50%}
.phone-message p{font:.77rem/1.6 Inter,sans-serif;letter-spacing:0;color:#D4E0E6;margin:0}.phone-message p+p{margin-top:7px}.phone-message .message-action{color:#A9BEC9}.phone-message strong{font-weight:550;color:#CDDDE4}.message-time{position:absolute;right:10px;bottom:6px;font: .54rem 'JetBrains Mono',monospace;color:#849CA9}.message-intro{margin-right:6px;background:#213D43;border-color:#33575D}.message-intro p{color:#DBE8E9}.message-source{background:#18222B}.message-source h3{color:#AFC2CD}
.phone-bottom{height:14px;display:flex;justify-content:center;align-items:end}.phone-bottom span{width:90px;height:3px;border-radius:2px;background:#61717B}
.phone-example figcaption{color:#9CAFB9;font-size:.7rem;line-height:1.65;margin:17px 10px 0;max-width:375px}.phone-example figcaption strong{color:#BACBD3;font-weight:500}
.phone-replay{display:none;color:var(--teal);border:0;border-bottom:1px solid #42616D;background:none;font-size:.75rem;padding:7px 0;margin:0 6px 12px auto;width:max-content;max-width:100%}.phone-enhanced .phone-replay{display:block}.phone-replay:disabled{opacity:.6;cursor:default}
.phone-typing{display:none;position:absolute;left:34px;top:var(--typing-top,200px);align-items:center;gap:4px;height:22px;padding:5px 11px;border-radius:11px;background:#29414D;opacity:.9}.phone-typing span{width:4px;height:4px;background:#9DBCC9;border-radius:50%;animation:message-typing 1.1s ease-in-out infinite}.phone-typing span:nth-child(2){animation-delay:.15s}.phone-typing span:nth-child(3){animation-delay:.3s}
.phone-playing .phone-typing{display:flex}.phone-message.message-pending{opacity:0;transform:translateY(9px)}.phone-message.message-arrived{animation:message-arrive .5s cubic-bezier(.22,1,.36,1) both}
.briefing-feature{align-items:start}.briefing-feature>.feature-copy{position:sticky;top:160px;padding-block:75px}
@keyframes message-arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes message-typing{0%,70%,100%{opacity:.35;transform:translateY(0)}35%{opacity:1;transform:translateY(-2px)}}
@media(max-width:760px){.phone-example{width:min(100%,375px)}.phone-frame{border-radius:29px;padding-inline:7px}.phone-messages{padding-inline:7px}.phone-message{margin-right:7px;padding:12px 12px 21px}.phone-message p{font-size:.79rem}.phone-message h3{font-size:.8rem}.briefing-feature>.feature-copy{position:static;padding-block:0}.phone-conversation{padding-inline:13px}.phone-example figcaption{font-size:.71rem}}
@media(prefers-reduced-motion:reduce){.phone-message.message-pending{opacity:1;transform:none}.phone-message.message-arrived,.phone-typing span{animation:none}.phone-typing{display:none!important}}
.motion-off .phone-message.message-pending{opacity:1;transform:none}.motion-off .phone-message.message-arrived,.motion-off .phone-typing span{animation:none}.motion-off .phone-typing{display:none!important}
@media print{.phone-example{max-width:100%;width:100%}.phone-frame{border:1px solid #777;background:white;color:black;box-shadow:none}.phone-message{break-inside:avoid;background:white;border-color:#AAA}.phone-message p,.phone-message h3,.phone-message strong,.phone-message .message-action{color:black}.phone-message.message-pending{opacity:1;transform:none}.phone-status,.phone-bottom,.phone-typing,.phone-replay{display:none!important}.briefing-feature>.feature-copy{position:static;padding:0}.phone-conversation strong,.phone-example figcaption{color:black}}
