.real-friends{background:#f6faf7;color:#294c42;scroll-margin-top:160px}
#real-friends{padding-top:64px;padding-bottom:64px}
.real-friends .section-heading{margin-bottom:28px}
.real-friend-profiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1080px;margin:0 auto}
.real-friend-profile{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:28px;border:1px solid #d6e4da;border-radius:8px;background:#fff;box-sizing:border-box}
.real-friend-profile:last-child{border-color:#e6d5dc}
.real-friend-identity{display:flex;align-items:center;flex-wrap:wrap;gap:10px;width:100%;font-size:13px;font-weight:600}
.real-friend-identity img{display:block;width:28px;height:28px;flex:none}
.real-friend-species{margin-left:auto;color:#63766b;font-weight:400}
.real-friend-person{display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:18px;width:100%;margin-top:24px}
.real-friend-avatar{position:relative;display:block;width:84px;height:84px;overflow:hidden;border-radius:50%;background:#eff4ee}
.real-friend-avatar img{position:absolute;display:block;max-width:none;height:auto}
.real-friend-profile h3{font-size:26px;line-height:1.4;margin:0 0 6px;letter-spacing:0;overflow-wrap:anywhere}
.real-friend-handle{font-family:inherit;font-size:14px;line-height:1.6;margin:0;color:#63766b;overflow-wrap:anywhere}
.real-friend-bio{font-size:16px;line-height:1.7;margin:18px 0 24px}
.real-friend-follow{display:flex;align-items:center;justify-content:space-between;gap:20px;box-sizing:border-box;min-height:48px;width:100%;padding:12px 16px;margin-top:auto;border:1px solid #294c42;border-radius:6px;background:#294c42;color:#fff;text-decoration:none;font-size:15px;line-height:1.5;font-weight:600}
.real-friend-follow:hover{background:#1d3d33}
.real-friend-follow:focus-visible{outline:3px solid #be691c;outline-offset:4px}
#route-view>.real-friends{margin-top:40px;padding:32px 24px;border-top:1px solid #d6e4da}
@media(max-width:700px){
  #real-friends{padding-top:40px;padding-bottom:40px}
  .real-friend-profiles{grid-template-columns:minmax(0,1fr);gap:16px}
  .real-friend-profile{padding:22px}
  .real-friend-person{grid-template-columns:72px minmax(0,1fr);gap:14px;margin-top:20px}
  .real-friend-avatar{width:72px;height:72px}
  .real-friend-profile h3{font-size:23px}
  #route-view>.real-friends{padding:28px 16px}
}