/* A full conversation beside a smaller, scrollable phone with relevant settings. */
.companion .bot-screen-pair{display:grid;grid-template-columns:minmax(0,174px) minmax(0,300px);align-items:center;gap:22px;width:100%;justify-self:center;max-width:496px}
.companion .bot-screen-pair .bot-flip{min-width:0;max-width:300px}
.bot-settings-phone{margin:0;min-width:0;align-self:center}
.bot-settings-phone .bot-settings-screen{padding:0;border:5px solid #1c201d;display:block;background:#ecefe9;width:100%;aspect-ratio:390/844;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;border-radius:20px;box-shadow:0 15px 30px #293e341a;scrollbar-width:thin;cursor:zoom-in;align-content:start}
.companion .bot-settings-phone img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:top;border:0;border-radius:0;box-shadow:none}
.bot-settings-phone figcaption{font-size:11px;line-height:1.5;color:var(--muted);margin-top:10px;text-align:center}
.flip-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:currentColor;opacity:.25}
.flip-dots button.on{opacity:.75}
/* The quote belongs to the phone, rather than the phone + sun together. */
.os-phone-column{width:230px;flex:none;min-width:0}
.os-phone-column .os-phone{width:100%}
.os-phone-column .human-quote{width:100%;max-width:none;text-align:center;margin:20px 0 0;line-height:1.5}
@media(max-width:600px){
 .companion .bot-screen-pair{grid-template-columns:minmax(0,.56fr) minmax(0,1fr);max-width:420px;gap:14px}
 .bot-settings-phone .bot-settings-screen{border-width:4px;border-radius:16px}
 .bot-settings-phone figcaption{font-size:10px}
}
@media(max-width:360px){#offscreen .os-phone-column{width:calc(100% - 78px)}#offscreen .os-phone-column .os-phone{width:100%}}
/* Oct 7: Safari doesn't clip a transformed iframe to its parent's rounded corners; mask the frame and round the iframe itself */
.argos .device-scale{-webkit-mask-image:-webkit-radial-gradient(white,black);mask-image:radial-gradient(white,black);isolation:isolate;background:transparent}
.argos .device-scale iframe{border-radius:48px;background:transparent}
.argos-detail img{border-radius:0;background:none}