.join-member-story { padding: 28px 0 48px; }
.join-member-story .container { max-width: 1120px; }
.join-member-story .member-story-label { margin: 0 0 18px; color: #9caec1; font: 600 .75rem/1.5 'DM Sans', sans-serif; letter-spacing: .14em; }
.join-member-story .member-chat { margin: 0; border: 1px solid #344557; border-left: 6px solid #00aeef; border-radius: 18px; background: #111923; padding: clamp(24px, 4vw, 46px); box-shadow: 0 16px 36px #0003; }
.join-member-story .member-chat-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.join-member-story .member-avatar { position: relative; display: block; flex: 0 0 64px; width: 64px; height: 64px; overflow: hidden; border-radius: 50%; background: #000; }
.join-member-story .member-avatar img { position: absolute; width: 2327.27273%; max-width: none; height: auto; left: -12.5%; top: -95.45455%; }
.join-member-story .member-identity { min-width: 0; }
.join-member-story .member-name { display: block; color: #47d4bf; font: 600 1.2rem/1.4 'DM Sans', sans-serif; }
.join-member-story .member-time { display: block; margin-top: 3px; color: #a6b5c5; font: 400 .875rem/1.5 'DM Sans', sans-serif; }
.join-member-story blockquote { margin: 0; color: #f5f7fa; font-family: 'DM Sans', sans-serif; }
.join-member-story .member-quote-lead { margin: 0; max-width: 28ch; font-size: clamp(1.65rem, 3.1vw, 2.5rem); font-weight: 500; line-height: 1.3; letter-spacing: -.025em; }
.join-member-story .member-quote-thanks { margin: 24px 0 0; max-width: 60ch; font-size: 1.125rem; line-height: 1.65; color: #d5dfeb; }
.join-member-story .member-original { margin-top: 28px; padding-top: 18px; border-top: 1px solid #344557; }
.join-member-story .member-original summary { width: fit-content; min-height: 44px; cursor: pointer; color: #a9ddf1; font: 500 .875rem/1.5 'DM Sans', sans-serif; padding: 10px 2px; }
.join-member-story .member-original summary:focus-visible { outline: 2px solid #00aeef; outline-offset: 5px; border-radius: 3px; }
.join-member-story .member-original p { margin: 14px 0 0; color: #d5dfeb; font: 400 1rem/1.7 'DM Sans', sans-serif; max-width: 70ch; }
.join-member-story figcaption { margin-top: 16px; color: #a6b5c5; font: 400 .8125rem/1.5 'DM Sans', sans-serif; }
@media (max-width: 600px) {
  .join-member-story { padding: 16px 0 32px; }
  .join-member-story .member-chat { border-left-width: 4px; border-radius: 14px; padding: 22px 20px; }
  .join-member-story .member-chat-header { gap: 12px; margin-bottom: 22px; }
  .join-member-story .member-avatar { flex-basis: 52px; width: 52px; height: 52px; }
  .join-member-story .member-name { font-size: 1.0625rem; }
  .join-member-story .member-time { font-size: .8125rem; }
  .join-member-story .member-quote-lead { font-size: 1.5rem; line-height: 1.38; letter-spacing: -.02em; }
  .join-member-story .member-quote-thanks { font-size: 1rem; line-height: 1.6; margin-top: 20px; }
}