/* WP2: header avatar, phone bar avatar, account menu, Brand page, login details, view transitions */
.top .who{margin-left:auto}
.me-btn{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid transparent;background:none;cursor:pointer;transition:border-color var(--dur-2,.2s),background-color var(--dur-2,.2s)}
.me-btn:hover,.me-btn[aria-expanded=true]{border-color:var(--border-amber);background:var(--amber-dim)}
.me-btn .av,.navme .av{border-width:1px;box-shadow:none}
.menu .acc-id{display:grid;gap:.1rem;padding:.55rem .8rem .35rem;font:600 .92rem var(--font-head)}
.menu .acc-id small{color:var(--muted);font:500 .78rem var(--font-body)}
.nav .navme{flex:1;min-width:0;max-width:120px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;padding:.55rem .3rem;min-height:56px;border-radius:16px;color:var(--muted);background:none;border:0;cursor:pointer;font:600 var(--fs-xs,.68rem)/1.1 var(--font-head)}
.nav .navme .ic{display:grid;place-items:center;width:44px;height:28px}
.nav .navme:focus-visible{outline-offset:-2px}
@media(max-width:900px){
  .top .who{display:none}
  #acctMenu{top:auto;bottom:calc(4.6rem + var(--sab));right:max(.75rem,var(--sar))}
}
.brand-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1rem;max-width:760px}
.brand-card{display:grid;gap:.5rem;justify-items:start;align-content:start}
.brand-card .ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--amber-dim);color:var(--amber-text)}
.brand-card .btn{margin-top:.5rem}
.login details.rem{margin-top:.6rem;color:var(--muted);font-size:var(--fs-sm)}
.login details.rem summary{cursor:pointer;width:max-content;margin:0 auto}
.login details.rem label{display:flex;gap:.5rem;align-items:center;justify-content:center;margin-top:.5rem}
.login .newhere{margin-top:1.1rem}
main#view.vt{view-transition-name:view}
::view-transition-old(view){animation:vt-out .12s ease both}
::view-transition-new(view){animation:vt-in .24s cubic-bezier(.2,.8,.2,1) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(6px)}}
.vt>*{animation:none!important}
::view-transition-group(root){animation-duration:0s}

/* public site links on login/signup */
.legal,.help-wa{text-align:center;margin-top:.5rem}
