/* Scoped to the existing Good Connections section. */
.rodeo-comments { min-width: 0; }
.rodeo-comments-bar {
  display: flex; justify-content: flex-end; margin: -12px 0 18px;
}
.rodeo-comments-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid #183b52; border-radius: 999px;
  padding: 9px 16px; color: #183b52; background: #fffaf0;
  font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.4;
  cursor: pointer;
}
.rodeo-comments-toggle:hover { background: #f5e6cd; }
.rodeo-comments-toggle:focus-visible, .rodeo-comments-viewport:focus-visible {
  outline: 3px solid #126883; outline-offset: 4px;
}
.rodeo-comments-viewport {
  overflow-x: auto; overflow-y: hidden; direction: ltr;
  scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 8px 0 20px; border-radius: 16px;
}
.rodeo-comments-viewport::-webkit-scrollbar { display: none; }
.rodeo-comments-track, .rodeo-comments-group {
  display: flex; align-items: flex-start; width: max-content;
}
.rodeo-comments-group { gap: 22px; padding-right: 22px; }
.rodeo-comment {
  --card: #d4f0eb; --accent: #1c645d;
  position: relative; display: flex; flex-direction: column;
  box-sizing: border-box; flex: 0 0 auto; width: 350px;
  min-height: 280px; margin: 0; padding: 32px;
  border: 1px solid var(--accent); border-radius: 20px 8px 20px 8px;
  background: var(--card); color: #183b52;
  box-shadow: 0 7px 0 #183b5212;
}
.rodeo-comment::before {
  content: ""; position: absolute; inset: 9px; pointer-events: none;
  border: 1px dashed var(--accent); border-radius: 13px 3px 13px 3px;
  opacity: .55;
}
.rodeo-comment[data-color="1"] { --card: #ffe1c3; --accent: #8c471d; }
.rodeo-comment[data-color="2"] { --card: #dceafb; --accent: #365e8b; }
.rodeo-comment[data-color="3"] { --card: #f5eac4; --accent: #776020; }
.rodeo-comment[data-color="4"] { --card: #e9def3; --accent: #705089; }
.rodeo-comment[data-color="5"] { --card: #f7dcd9; --accent: #904d47; }
.rodeo-comment-mark {
  color: var(--accent); font: 76px/.7 Georgia, serif; height: 45px;
}
.rodeo-comment blockquote {
  margin: 12px 0 25px; padding: 0; border: 0; background: transparent;
  font-family: "Rodeo Display", Georgia, serif;
  font-size: 27px; line-height: 1.3; overflow-wrap: anywhere;
}
.rodeo-comment figcaption {
  display: grid; gap: 4px; margin-top: auto; padding-top: 18px;
  border-top: 1px solid var(--accent); font-size: 14px; line-height: 1.5;
}
.rodeo-comment figcaption strong { font-size: 16px; }
.rodeo-comment > a {
  color: #183b52; margin-top: 16px; font-size: 12px;
  text-decoration: underline; text-underline-offset: 3px;
}
.rodeo-comments-viewport:focus-within { scrollbar-width: thin; }
.rodeo-comments[data-reduced-motion] .rodeo-comments-bar { display: none; }
.rodeo-comments[data-reduced-motion] .rodeo-comments-viewport { scrollbar-width: thin; }
@media (prefers-reduced-motion: reduce) {
  .rodeo-comments-bar, .rodeo-comments [data-copy] { display: none; }
  .rodeo-comments-viewport { scrollbar-width: thin; }
}
@media (max-width: 600px) {
  .rodeo-comment { width: min(320px, 80vw); padding: 28px; }
  .rodeo-comment blockquote { font-size: 25px; }
  .rodeo-comments-group { gap: 16px; padding-right: 16px; }
  .rodeo-comments-bar { justify-content: flex-start; margin-top: 0; }
}