body:has(.ruut-chat-page) { margin: 0; background: #fff; color: #17121f; }
.ruut-chat-page,.ruut-chat-page * { box-sizing: border-box; }
.ruut-chat-page { overflow: clip; line-height: 1.55; }
.ruut-chat-page :is(h1,h2,h3,p) { margin: 0; }
.ruut-chat-page :is(button,input) { font: inherit; }
.ruut-chat-page button { cursor: pointer; }
.ruut-chat-page button:disabled { cursor: default; }
.ruut-chat-page a { color: inherit; text-decoration: none; }
.ruut-chat-page :is(button,input,a,summary):focus-visible { outline: 3px solid #a06bda; outline-offset: 4px; }
.ruut-chat-page [hidden] { display: none !important; }
.ruut-chat-page :is(section,[id]) { scroll-margin-top: 96px; }
.rc-container { width: calc(100% - 2 * var(--ruut-page-gutter)); max-width: var(--ruut-page-width); margin-inline: auto; }
body:has(.ruut-chat-page) .ruut-navbar { padding-inline: var(--ruut-page-gutter); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; color: #17121f; }
body:has(.ruut-chat-page) .ruut-nav-shell,body:has(.ruut-chat-page) .ruut-footer-inner { max-width: var(--ruut-page-width); }
html.ruut-page-scrolled body:has(.ruut-chat-page) .ruut-navbar { background: #ffffffc9; color: #17121f; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
body:has(.ruut-chat-page) .ruut-nav-cta { background: #101417; color: #fff !important; }
body:has(.ruut-chat-page) .ruut-footer { padding-inline: var(--ruut-page-gutter); }
.rc-hero { position: relative; padding: 152px 0 0; background: #fbf5ff url('/theme-assets/github-1-20fa33a1c1f69a3bba9f209bfba4d574cdb66405/images/hero-lilac.png') center top/cover no-repeat; color: #17121f; }
.rc-hero-copy { max-width: 850px; text-align: left; }
.rc-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #8050aa; font-size: 11px; font-weight: 600; letter-spacing: 1px; }
.rc-hero-eyebrow { color: #51405f; font-size: 13px; font-weight: 500; letter-spacing: 0; }
.rc-hero-eyebrow > span { padding-left: 10px; margin-left: 4px; border-left: 1px solid #cfc0da; }
.rc-hero h1 { margin: 26px 0 22px; font-size: 64px; font-weight: 400; line-height: 1.06; letter-spacing: -2.8px; text-wrap: balance; }
.rc-hero h1 span { display: block; opacity: .7; }
.rc-hero-copy > p { max-width: 760px; color: #63576e; font-size: 19px; line-height: 1.5; }
.rc-hero .rc-actions { justify-content: flex-start; }
.rc-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.rc-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 12px 20px; border: 1px solid transparent; border-radius: 12px; font-size: 14px; font-weight: 500; line-height: 1.4; }
.rc-button svg { width: 17px; height: 17px; }
.rc-button-dark { color: #fff !important; background: #17121f; }
.rc-button-outline { color: #17121f !important; border-color: #17121f33; }
.rc-button:active { transform: scale(.97); }
.rc-channels { position: relative; isolation: isolate; min-height: 850px; padding-top: 96px; background: #fff; text-align: center; }
.rc-channels-landscape { position: absolute; z-index: -1; inset: 220px 0 0; background: linear-gradient(#fff 0%,#fffffff5 20%,#ffffffd9 45%,#ffffff99 65%,#ffffff00 87%),url('/theme-assets/github-1-20fa33a1c1f69a3bba9f209bfba4d574cdb66405/images/chat/channels-landscape.png') center bottom/cover no-repeat; }
.rc-channels-content { position: relative; }
.ruut-chat-page .rc-channels h2 { margin: 0; font-size: 42px; }
.rc-channels p { max-width: 730px; margin: 24px auto 30px; color: #807489; font-size: 17px; line-height: 1.6; }
.rc-channels .rc-button { background: #fff; border-color: #e6e3ec; box-shadow: 0 2px 4px #25183d0a; }
.rc-channel-orbit { display: grid; grid-template-columns: repeat(14,minmax(0,1fr)); column-gap: 14px; row-gap: 22px; max-width: 1060px; padding: 0; margin: 60px auto 0; list-style: none; }
.rc-channel-orbit li { grid-column: span 2; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #4c4957; font-size: 12px; font-weight: 500; }
.rc-channel-orbit li:nth-child(2n) { transform: translateY(18px); }
.rc-channel-orbit li:nth-child(8) { grid-column: 2 / span 2; }
.rc-channel-tile { display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid #e5e7ee; border-radius: 19px; background: #fff; box-shadow: 0 2px 3px #2434540e,0 10px 24px #24345404; }
.rc-channel-tile img { display: block; width: 30px; height: 30px; object-fit: contain; }
.rc-section { padding-block: 96px; }
.rc-section-heading { margin-bottom: 42px; }
.ruut-chat-page h2 { margin-top: 15px; font-size: 44px; line-height: 1.16; font-weight: 400; letter-spacing: -1.7px; text-wrap: balance; }
.rc-section-heading > p { margin-top: 18px; color: #807489; font-size: 17px; }
@media (hover: hover) and (pointer: fine) {
  .rc-button-dark:hover { background: #30283a; }
}
@media (max-width: 760px) {
  .rc-hero { padding-top: 124px; }
  .rc-hero h1 { font-size: clamp(36px,7.6vw,54px); letter-spacing: -1.6px; }
  .rc-hero-copy > p { font-size: 15px; }
  .rc-hero-eyebrow { font-size: 11px; }
  .rc-hero-eyebrow > span { padding-left: 7px; font-size: 10px; }
  .rc-hero-eyebrow > img { width: 16px; height: 16px; }
  .rc-hero .rc-actions { gap: 10px; }
  .rc-hero .rc-button { padding-inline: 15px; }
  .rc-channels { min-height: 900px; padding-top: 64px; }
  .ruut-chat-page .rc-channels h2 { font-size: 33px; }
  .rc-channels p { margin-block: 20px 24px; font-size: 15px; }
  .rc-channels-landscape { inset-block-start: 320px; background-position: center bottom; }
  .rc-channel-orbit { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 22px 7px; margin-top: 40px; }
  .rc-channel-orbit li,.rc-channel-orbit li:nth-child(8) { grid-column: auto; gap: 8px; font-size: 10px; }
  .rc-channel-orbit li:nth-child(2n) { transform: none; }
  .rc-channel-orbit li:nth-child(11) { grid-column: 2; }
  .rc-channel-tile { width: 52px; max-width: 100%; height: 52px; border-radius: 15px; }
  .rc-channel-tile img { width: 25px; height: 25px; }
  .rc-section { padding-block: 64px; }
  .ruut-chat-page h2 { font-size: 33px; letter-spacing: -1px; }
  .rc-section-heading { margin-bottom: 30px; }
  .rc-section-heading > p { font-size: 15px; }
  body:has(.ruut-chat-page) .ruut-nav-links { color: #e9e9ea; }
}


