/* ── COMMUNITY ── */
.community { text-align: center; padding: 36px 0 20px; border-top: 1px solid rgba(255,255,255,0.15); }
.community h2 { font-size: clamp(34px, 0.89vw + 21.1px, 44px); font-weight: 800; color: #fff; margin-bottom: 20px; letter-spacing: -0.7px; line-height: 1.2; }
.comm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 440px; margin: 0 auto 24px; }
.comm-btn { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: 11px;
  color: #fff; font-size: 13px; font-weight: 600; text-decoration: none;
  cursor: pointer; transition: opacity 0.15s; font-family: 'Inter', sans-serif; border: none;
}
.comm-btn:hover { opacity: 0.88; }
.comm-btn.tw { background: #000; }
.comm-btn.dc { background: #5865F2; }
.comm-btn.yt { background: #FF0000; }
.comm-btn.tg { background: #229ED9; }
.comm-btn svg { width: 20px; height: 20px; fill: #fff; flex-shrink: 0; }
.footer-txt { font-size: 12px; color: rgba(255,255,255,0.45); line-height: 2.2; }
.footer-txt a { color: rgba(255,255,255,0.75); text-decoration: none; }
.footer-txt a:hover { color: #fff; }

#community-footer {
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.15);
  width: 100%;
  margin: 40px 0 0;
  padding: 44px 40px 40px;
}

/* ── community footer (guide pages) — solid band, same chrome color as
 * the gbar, so it reads as one continuous piece of chrome. ──
 * Real, reported bug: .toc (guide.css) is `position: fixed; bottom: 0`,
 * so its own background always reaches the true bottom of the viewport
 * — well past where its actual nav links end — and its default z-index
 * (10) let that leftover white box sit on top of this footer's left
 * edge once scrolled all the way down, making the footer visually stop
 * short of the sidebar's width instead of spanning full-bleed like
 * SuiTools' equivalent page. gfooter's own box already spans the full
 * width underneath (confirmed via getBoundingClientRect) — this is
 * purely a stacking-order fix, not a width fix. z-index 11 is enough to
 * clear .toc's desktop z-index (10) while staying well under its
 * mobile open-drawer z-index (45, guide.css) so the drawer still
 * correctly overlays the footer when a user has it open. */
.gfooter { position: relative; z-index: 11; background: var(--chrome-bg); color: #fff; padding: 56px 24px 60px; text-align: center; border-top: 1px solid rgba(255,255,255,.14); }
.gfooter h2 { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 32px; letter-spacing: -0.5px; margin: 0; color: #fff; }
.gf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 440px; margin: 30px auto 0; }
.gf-btn { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: 11px; color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; }
.gf-btn:hover { opacity: .9; text-decoration: none; }
.gf-btn svg { width: 20px; height: 20px; fill: #fff; flex-shrink: 0; }
.gf-btn.yt { background: #ff0000; } .gf-btn.tw { background: #000; } .gf-btn.tg { background: #229ED9; } .gf-btn.dc { background: #5865F2; }
.gf-txt { margin-top: 30px; font-size: 14px; color: rgba(255,255,255,.72); line-height: 2.1; }
.gf-txt a { color: rgba(255,255,255,.88); text-decoration: none; }
.gf-txt a:hover { text-decoration: underline; }
@media (max-width: 560px) { .gf-grid { grid-template-columns: 1fr; } .gfooter h2 { font-size: 26px; } }