/* Rolling testimonials (see rolling-testimonials.js). Matches the landing page's
   review cards: white card on light grey, grey quote, small pill tag. */
.rt-panel { position: relative; overflow: hidden; background: #f6f6f6; }
.rt-cols { position: absolute; inset: 0; display: grid; gap: 12px; padding: 0 24px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%); }
.rt-col { min-width: 0; }
.rt-track { display: flex; flex-direction: column; gap: 12px; animation: rt-roll 60s linear infinite; }
.rt-cols:hover .rt-track { animation-play-state: paused; }
@keyframes rt-roll { from { transform: translateY(calc(-100% / 3)); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .rt-track { animation: none; } }

.rt-panel .rv { margin: 0; background: #fff; border: 1px solid #ebebeb; border-radius: 14px; padding: 24px 22px 22px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.08); text-align: left; }
.rt-panel .rv blockquote { margin: 0; font-size: 15.5px; line-height: 1.45; color: #5c5c5c; font-weight: 400; letter-spacing: -0.005em; }
.rt-panel .rv figcaption { display: flex; align-items: center; gap: 11px; margin-top: 18px; }
.rt-panel .rv-ava { position: relative; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: #ececec; color: #555; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; box-shadow: 0 0 0 1px #e6e6e6; }
.rt-panel .rv-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rt-panel .rv-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rt-panel .rv-name, .rt-panel .rv-role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-panel .rv-name { font-size: 15px; font-weight: 600; color: #141414; letter-spacing: -0.01em; line-height: 1.25; }
.rt-panel .rv-role { font-size: 13px; color: #7a7a7a; line-height: 1.3; }
.rt-panel .rv-tag { flex: 0 0 auto; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #6b6b6b; background: #f0f0f0; border-radius: 6px; padding: 5px 9px; }

.rt-panel .rv-reel { padding: 9px 9px 16px; }
.rt-panel .rv-reel figcaption { margin: 14px 13px 0; }
.rt-panel .rv-reel .rv-role { white-space: normal; }
.rt-panel .rv-video { position: relative; display: block; width: 100%; aspect-ratio: 9/16; border: 0; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: linear-gradient(160deg, #ececec, #dcdcdc); }
.rt-panel .rv-video-cover { position: absolute; inset: 0; background: center/cover no-repeat; }
.rt-panel .reel-tag { position: absolute; top: 11px; left: 11px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,.88); color: #555; border-radius: 99px; padding: 4px 9px; }
/* covers carry Instagram's own dark play disc; ours sits over it */
.rt-panel .reel-play { position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; background: rgba(255,255,255,.95); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0,0,0,.18); transition: transform .15s; }
.rt-panel .reel-play::after { content: ""; border-left: 20px solid #141414; border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 6px; }
.rt-panel .rv-video:hover .reel-play { transform: scale(1.06); }

.rt-modal { position: fixed; inset: 0; z-index: 300; background: rgba(10,10,10,.6); display: grid; place-items: center; padding: 20px; }
.rt-modal[hidden] { display: none; }
.rt-modal-in { position: relative; width: min(380px, 100%); aspect-ratio: 9/16; max-height: 90vh; background: #000; border-radius: 18px; overflow: hidden; }
.rt-modal-in iframe { width: 100%; height: 100%; border: 0; }
.rt-x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); cursor: pointer; font-size: 14px; }