/* Roast My SaaS — vitrine compartilhada (home + /roast): prova social + carrossel do roast real */
.proof { color: var(--muted); font-size: 14px; text-align: center; margin: 14px auto 0; max-width: 560px; text-wrap: pretty; }
.proof b { color: var(--ink); font-weight: 700; }
.proof .proof-last { display: block; margin-top: 2px; }
.proof[hidden] { display: none; }

.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 14px 0 0; padding: 0; list-style: none; }
.trust li { color: var(--muted); font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.trust li::before { content: '✓'; color: var(--flame); font-weight: 700; font-size: 12px; }

.rs { margin: 34px auto 44px; background: var(--card); border-radius: var(--radius-card, 18px); padding: 18px 18px 16px; box-shadow: inset 0 0 0 1px var(--card-edge), 0 12px 40px rgba(0, 0, 0, 0.3); }
.rs[hidden] { display: none; }
.rs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.rs-head > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.rs-kicker { font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--flame); font-weight: 700; }
.rs-head b { color: var(--ink); font-size: 14.5px; }
.rs-score { font-family: 'Anton', sans-serif; font-size: 20px; line-height: 1; color: #3ecf6a; font-variant-numeric: tabular-nums; }
.rs-score small { font-family: inherit; font-size: 12px; color: var(--muted); margin-left: 2px; }
.rs-open { color: var(--ember); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; }
.rs-open:hover { text-decoration: underline; }
.rs-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 12px; margin: 0 -2px; scrollbar-color: rgba(255, 176, 32, 0.35) transparent; -webkit-overflow-scrolling: touch; }
.rs-track:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; border-radius: 12px; }
.rs-card { flex: 0 0 min(230px, 78vw); scroll-snap-align: start; background: var(--bg-raised); border-radius: 12px; overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 176, 32, 0.12); display: flex; flex-direction: column; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.rs-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255, 176, 32, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35); }
.rs-chrome { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: var(--char); }
.rs-chrome i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.rs-chrome em { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); margin-left: 6px; }
.rs-shot { position: relative; display: block; width: 100%; background: #000; overflow: hidden; }
.rs-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.rs-ann { position: absolute; border: 1.5px solid; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); pointer-events: none; }
.rs-ann b { position: absolute; top: -9px; left: -6px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; color: #0e0906; font-size: 9px; font-weight: 800; line-height: 14px; text-align: center; font-style: normal; }
.rs-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 2px; }
.rs-title { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-tag { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 176, 32, 0.16); color: var(--flame); }
.rs-tag.hot { background: rgba(255, 77, 77, 0.16); color: #ff7a7a; }
.rs-sub { font-size: 11.5px; color: var(--muted); padding: 0 12px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-truth { font-style: italic; color: var(--ink); font-size: 14.5px; margin: 8px 0 0; text-wrap: pretty; }
.rs-count { color: var(--muted); font-size: 12.5px; margin: 10px 0 0; }
.rs-count a { color: var(--flame); }
@media (prefers-reduced-motion: reduce) { .rs-card { transition: none; } .rs-card:hover { transform: none; } }