/* "Community first" page extras (2026-11-13). Builds on site.css (night + gold look, .group, .faq-topics chips, section cards, .play buttons). */
.cf-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 18px 0 8px; }
.cf-start a { display: block; text-decoration: none; color: var(--ink); padding: 16px 16px 14px; border-radius: 16px; background: linear-gradient(160deg, rgba(24, 28, 64, .8), rgba(9, 11, 28, .85)); border: 1px solid rgba(230, 180, 90, .35); transition: transform .15s ease, box-shadow .2s ease; }
.cf-start a:hover, .cf-start a:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 24px rgba(255, 196, 96, .22); outline: none; }
.cf-start b { display: block; font-family: var(--display); font-weight: 600; font-size: 15.5px; letter-spacing: .02em; color: var(--gold-hi); margin-bottom: 4px; }
.cf-start span { display: block; font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.cf-search { margin: 18px 0 4px; }
.cf-search label { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.cf-search input { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: rgba(10, 13, 34, .8); border: 1px solid rgba(230, 180, 90, .45); border-radius: 12px; padding: 12px 14px; }
.cf-search input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.cf-count { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-3); min-height: 1.2em; }
.cf-topics a span { opacity: .65; font-size: 12px; margin-left: 4px; }
.cf-lead { margin: 0 0 8px; font-size: 16.5px; line-height: 1.5; color: var(--ink); font-weight: 600; }
section.cf-q p:last-child { margin-bottom: 0; }
.cf-note, .cf-cta { margin: 28px 0 8px; padding: 20px 22px; border-radius: 18px; border: 1px solid rgba(230, 180, 90, .4); background: linear-gradient(160deg, rgba(24, 28, 64, .75), rgba(9, 11, 28, .8)); }
.cf-cta h2 { margin: 0 0 6px; font-family: var(--display); font-size: 20px; color: var(--gold-hi); }
.cf-cta p, .cf-note p { margin: 0 0 12px; color: var(--ink-2); }
.cf-note p:last-child { margin-bottom: 0; }
.cf-top { display: inline-block; margin-top: 18px; font-size: 13.5px; color: var(--ink-3); text-decoration: none; }
.cf-top:hover { color: var(--ink); }
.cf-hide { display: none !important; }
@media (prefers-reduced-motion: reduce) { .cf-start a { transition: none; } }