/* Фирменный знак. The circle behind the "m" is the one rounded
   element §13.1 names as an exception.

   Source: maosh_saas_demo.html <style> block, lines 24-37.
   Do not restyle while porting: divergence from the prototype is a defect
   (build prompt §2, §3.5). */

/* ═══ фирменный знак ══════════════════════════════════════════════ */
.logo{display:inline-flex;align-items:center;background:var(--brand);
  padding:5px 11px 6px 13px;line-height:1}
.logo .w{position:relative;isolation:isolate;font-family:var(--head);
  font-variation-settings:"wdth" 100,"wght" 700;letter-spacing:-.035em;
  color:var(--brand-ink);font-size:17px}
.logo .w::before{content:"";position:absolute;left:-.30em;top:50%;
  width:1.42em;height:1.42em;border-radius:50%;background:var(--brand-soft);
  transform:translateY(-50%);z-index:-1}
.logo.xl{padding:16px 30px 19px 36px}
.logo.xl .w{font-size:56px}
.logo.sm{padding:3px 8px 4px 10px}
.logo.sm .w{font-size:13px}

/* A workspace's own mark, in place of the wordmark.
   No yellow block behind it and no circle: those belong to «maosh», and a
   client's logo carries its own shape. The box matches the wordmark's height at
   each size — 20px, 28px, 91px — so nothing around it moves.
   max-width because a wordmark is wide: at 8:1 a header logo is 160px, and
   past that it starts pushing the organization name out of the row. */
.logo.own{background:none;padding:0;align-items:center}
.logo.own img{display:block;height:28px;max-width:260px;object-fit:contain}
.logo.own.sm img{height:20px;max-width:180px}
.logo.own.xl img{height:91px;max-width:420px}