/* FluffCams RTC page and guides (pages/rtc.php, pages/rtc/*.php). Colours only from the site's tokens. */
.rtc-probar { max-width: var(--wrap); margin: 24px auto 0; padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); color: var(--muted); font-size: 15px; box-sizing: border-box; width: calc(100% - 2 * var(--gutter)); }
.rtc-probar b { color: var(--text); }
.rtc-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 980px; margin: 0 auto; }
.rtc-plan { display: flex; flex-direction: column; gap: 14px; }
.rtc-plan .plan-btns { margin-top: auto; }
.rtc-monthly { margin-top: -8px; }
.rtc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 24px; display: flex; flex-direction: column; gap: 10px; color: var(--text); }
.rtc-card .body { color: var(--muted); margin: 0; }
.rtc-feats { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.rtc-list { margin: 4px 0 0; }
.rtc-list li { font-size: 15px; }
.rtc-t td, .rtc-t th { vertical-align: top; }
.rtc-cmp-btns { margin-top: 24px; justify-content: center; }
.rtc-guide { text-decoration: none; transition: transform .15s, border-color .15s; }
.rtc-guide:hover { transform: translateY(-3px); border-color: var(--border-strong); color: var(--text); }
.rtc-guide .link-acc { margin-top: auto; }
@media (max-width: 760px) {
  .rtc-plans { grid-template-columns: 1fr; }
  .rtc-probar { flex-direction: column; align-items: flex-start; }
}
/* the guides: screenshots of the admin panel */
.rtc-shot { margin: 18px 0 28px; }
.rtc-shot img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow-float); }
.rtc-shot figcaption { margin-top: 10px; font-size: 14px; color: var(--subtle); }
.rtc-toc { columns: 2; column-gap: 32px; margin: 0 0 32px; padding: 0; list-style: none; }
.rtc-toc li { margin: 0 0 8px; break-inside: avoid; }
@media (max-width: 760px) { .rtc-toc { columns: 1; } }