/* Shared visual standard for the homepage and How ARIN Works SMS samples.
   Page styles own placement and dimensions; this asset owns handset graphics. */
.arin-phone.phone { box-sizing:border-box; display:flex; flex-direction:column; padding:.4rem; overflow:hidden; border:.22rem solid #25272c; border-radius:2.75rem; background:#101216; color:#f2f0ea; box-shadow:0 1rem 2.5rem #0003,inset 0 0 0 .12rem #44474d; font:400 1rem/1.4 system-ui,sans-serif; }
.arin-phone *, .arin-phone *::before, .arin-phone *::after { box-sizing:border-box; }
.arin-phone::before { content:""; flex:0 0 auto; width:3rem; height:.3rem; margin:.35rem auto .45rem; border-radius:1rem; background:#050607; }
.arin-phone::after { content:""; flex:0 0 auto; width:4.5rem; height:.2rem; margin:.35rem auto .25rem; border-radius:1rem; background:#a1a4ab; }
.arin-phone .phone__header { flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; min-height:3rem; padding:.45rem .7rem .65rem; background:#191b20; color:#f2f0ea; border-bottom:1px solid #303238; }
.arin-phone .phone__back { color:#aab0bb; font:400 1.6rem/1 system-ui; }
.arin-phone .phone__contact { display:flex; flex-direction:row; align-items:center; gap:.45rem; font-size:.75rem; }
.arin-phone .phone__avatar { display:grid; place-items:center; flex:0 0 auto; width:1.8rem; height:1.8rem; border-radius:50%; background:#5d6571; color:#fff; font:500 .8rem/1 system-ui; }
.arin-phone .phone__sample { display:block; margin:0 0 0 auto; max-width:10rem; color:#bdc1c9; font:400 .65rem/1.4 system-ui; letter-spacing:0; text-align:center; }
.arin-phone .phone__thread { position:relative; display:flex; flex-direction:column; height:auto; min-height:0; flex:1 1 auto; gap:.65rem; padding:.85rem .75rem; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; color-scheme:dark; scrollbar-color:#8e8e93 #101216; scroll-behavior:smooth; background:#101216; }
.arin-phone .phone__thread > * { flex-shrink:0; }
.arin-phone .phone__label { margin:0 0 .35rem; text-align:center; color:#bdc1c9; font:400 .7rem/1.4 system-ui; }
.arin-phone .message-event { width:100%; }
.arin-phone .message-row { display:flex; flex-direction:column; margin:0; }
.arin-phone .message-row--advisor { align-items:flex-start; }
.arin-phone .message-row--visitor { align-items:flex-end; }
.arin-phone .speaker, .arin-phone .message__role { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.arin-phone .message { position:relative; width:fit-content; max-width:87%; margin:0; padding:.65rem .85rem; border-radius:1.15rem; color:#fff; font:400 1rem/1.4 system-ui,sans-serif; overflow-wrap:anywhere; }
.arin-phone .message::after { content:""; position:absolute; bottom:.08rem; width:.7rem; height:.8rem; }
.arin-phone .message--advisor { background:#2c2c2e; }
.arin-phone .message--advisor::after { left:-.28rem; background:#2c2c2e; clip-path:polygon(100% 0,100% 100%,0 100%); }
.arin-phone .message--visitor { background:#006bd6; }
.arin-phone .message--visitor::after { right:-.28rem; background:#006bd6; clip-path:polygon(0 0,100% 100%,0 100%); }
.arin-phone .message strong { font-weight:650; }
.arin-phone .message ul, .arin-phone .message ol { margin:.3rem 0; padding-left:1.2rem; }
.arin-phone .message li + li { margin-top:.35rem; }
.arin-phone .message > p:only-child { margin:0; }
.arin-phone .phone__composer { position:static; bottom:auto; flex:0 0 auto; min-height:3rem; display:flex; align-items:center; gap:.5rem; margin:0; padding:.45rem .65rem; background:#101216; color:#a6aab2; }
.arin-phone .phone__composer-pill { flex:1; min-width:0; padding:.4rem .65rem; border:1px solid #46474d; border-radius:999px; font:400 .8rem/1.4 system-ui; }
.arin-phone .phone__composer > span:first-child { display:grid; place-items:center; flex:0 0 auto; width:1.65rem; height:1.65rem; border-radius:50%; background:#28292f; font:400 1.25rem/1 system-ui; }
.arin-phone .phone__composer > span:last-child { font:400 1rem/1 system-ui; }
.arin-phone button:focus-visible, .arin-phone [tabindex]:focus-visible { outline:2px solid #d5ad62; outline-offset:3px; }
.arin-phone.is-sequenced .message-event { display:none; }
.arin-phone.is-sequenced .message-event.is-visible { display:flex; animation:scenario-arrival .5s ease-out both; }
.scenario-arrival { animation:scenario-arrival .5s ease-out both; }
@keyframes scenario-arrival { from { opacity:0; transform:translateY(.5rem); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { .arin-phone .phone__thread { scroll-behavior:auto; } .arin-phone.is-sequenced .message-event.is-visible, .scenario-arrival { animation:none; } }