/* Phone pages share one inset and one title.
   --page-x is the gutter. Promo .wrap, the signed-in header, and every page use it.
   The title is My aissistants: 47px, line-height .9, weight 700, tracking -2.35px. */
@media(max-width:860px){
 :root{--page-x:20px}
 /* .wrap uses margin:auto. A flex column then shrinks the page to its content and centers it, so a 342px column starts in from the gutter. Stretch the page and keep the gutter as padding. */
 main.wrap{width:100%;max-width:100%;margin-left:0;margin-right:0;align-self:stretch}
 h1,
 .h1,
 .prof-h,
 .ais-h,
 .cx-h,
 .cred-h,
 .sh1,
 .pricing-head h1,
 .ucs h2{
  font-size:47px;
  line-height:.9;
  font-weight:700;
  letter-spacing:-2.35px;
 }
 /* The mark's picture sits 8px inside its box. Shift the box so the picture meets the gutter. */
 header.apphead .appmark{left:calc(var(--page-x) - 8px)}
 header.apphead .umenu-slot{right:var(--page-x)}
 .ais{padding-left:0;padding-right:0}
 .cred-h,.cred-lead{margin-left:0;margin-right:0;max-width:none}
 .prof-card>.prof-ava,.prof-card>.prof-pic,.prof-social,.prof-mutual{margin-left:0}
 .slogo{left:var(--page-x)}
 .sgrid{padding-left:var(--page-x);padding-right:var(--page-x)}
}
@media(max-width:700px){
 .sh{padding-left:var(--page-x);padding-right:var(--page-x)}
 :root{--logo-left:var(--page-x)}
}
/* One ring on every userpic: 1px inside, 8% black, so a white logo stays visible.
   An image paints over its own inset shadow, so the ring is an inset outline.
   A clipped frame covers that outline, so the ring sits on the frame instead. */
.userpic,
img.prof-ava,
.appava>img,
.cx-who>img,
img.sav,
button.sme>img,
.acct-btn>img,
img.ais-ava,
img.note-ava,
.cais-faces>img{
 outline:1px solid rgba(0,0,0,.08);
 outline-offset:-1px;
}
/* Mutual faces carry their own 1px grey border, the same ring as initials. This inset outline would sit on that border and lighten the photos. */
.prof-mutual-faces>img{outline:none}
.prof-haspic::after,
.photo-ava:has(img.photo-pic:not([hidden]))::after{
 content:"";
 position:absolute;
 inset:0;
 z-index:1;
 border-radius:inherit;
 box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
 pointer-events:none;
}