.rtc-wrap {
  --rtc-accent: #2c7582;
  --rtc-accent-dark: #356b75;
  --rtc-text: #555;
  --rtc-line: #d8d8d8;
  --rtc-quote: #ededed;
  max-width: 820px;
  margin: 0 auto;
  font-family: inherit;
}

.rtc-circles {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 8px 12px 22px;
}

.rtc-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 2px;
  margin: 0;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.rtc-circle:hover {
  transform: translateY(-2px);
}

.rtc-circle:focus-visible {
  outline: 3px solid rgba(44,117,130,.22);
  outline-offset: 3px;
}

.rtc-circle.is-active {
  border-color: var(--rtc-accent);
  box-shadow: 0 0 0 1px rgba(44,117,130,.12);
}

.rtc-circle img,
.rtc-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}

.rtc-circle img {
  object-fit: cover;
}

.rtc-placeholder {
  display: grid;
  place-items: center;
  background: #efefef;
  color: #aaa;
  font-size: 38px;
  line-height: 1;
}

.rtc-divider {
  height: 1px;
  background: var(--rtc-line);
  width: 100%;
}

.rtc-panels {
  position: relative;
}

.rtc-panel {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 18px;
  padding: 28px 24px 14px;
  animation: rtcFade .22s ease;
}

.rtc-panel[hidden] {
  display: none !important;
}

.rtc-quote-mark {
  color: var(--rtc-quote);
  font-family: Georgia, serif;
  font-size: 94px;
  line-height: .72;
  font-weight: 700;
  user-select: none;
}

.rtc-copy h3 {
  margin: 0 0 12px;
  color: var(--rtc-accent-dark);
  font-size: 20px;
  line-height: 1.3;
}

.rtc-text {
  color: var(--rtc-text);
  font-size: 15px;
  line-height: 1.7;
}

.rtc-text p:first-child { margin-top: 0; }
.rtc-text p:last-child  { margin-bottom: 0; }

.rtc-author {
  margin-top: 22px;
  color: #3e3e3e;
  font-size: 14px;
  font-weight: 700;
}

@keyframes rtcFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .rtc-circles {
    gap: 12px;
  }

  .rtc-circle {
    width: 56px;
    height: 56px;
  }

  .rtc-panel {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    padding: 24px 12px 10px;
  }

  .rtc-quote-mark {
    font-size: 70px;
  }

  .rtc-copy h3 {
    font-size: 18px;
  }
}