/* Shell Chat landing (chat.shellgames.ai). Builds on /css/landing.css (lp- tokens, nav, buttons, phone mock). */
.sc *, .sc *::before, .sc *::after { box-sizing: border-box; }
.sc ul, .sc ol { margin: 0; padding: 0; }
.sc-nav-cta { margin-left: 1.4rem; }

/* Hero: copy left, the chat right — the chat is the product, so it is the hero */
.sc-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(32px, 6vw, 96px);
  align-items: center; padding: clamp(40px, 7vw, 96px) 0 0;
}
.sc-hero h1 { font-size: clamp(2.5rem, 5vw, 4.3rem); line-height: 1.02; font-weight: 780; letter-spacing: -0.025em; text-wrap: balance; max-width: 13ch; }
.sc .sc-hero-note { color: var(--tide); font-size: .9rem; margin-top: 1.1rem; }

/* Why: three columns of plain points, no cards */
.sc-points { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 2.4rem; }
.sc-points li { display: flex; flex-direction: column; gap: .35rem; }
.sc-points .lp-pt-icon { margin-bottom: .45rem; }
.sc-points b { font-size: 1.05rem; }
.sc-points p { color: var(--tide); font-size: .94rem; }

.sc .sc-games-hint { margin-top: 1.8rem; color: var(--tide); font-size: .94rem; max-width: 70ch; }
.sc-games-hint a { color: var(--sea); font-weight: 650; text-underline-offset: 2px; }

/* Install */
.sc-install { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.sc-install li { padding: 1.3rem 1.3rem 1.4rem; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255, 255, 255, .02); display: flex; flex-direction: column; gap: .35rem; }
.sc-os { font-size: 1.5rem; margin-bottom: .3rem; }
.sc-install b { font-size: 1.02rem; }
.sc-install p { color: var(--tide); font-size: .93rem; }

@media (max-width: 1060px) {
  .sc-hero { grid-template-columns: minmax(0, 1fr); }
  .sc-hero .lp-phone { max-width: 440px; width: 100%; margin: 0 auto; }
  .sc-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .sc-nav-cta { margin-left: auto; }
  .sc-install { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sc .lp-brand span { display: inline; }
  .sc-points { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
}
.sc .sc-hero .lp-lede { margin-top: 1.5rem; }
.sc .lp-next { margin-top: 1.8rem; }

/* Live numbers under the hero */
.sc-facts { display: flex; flex-wrap: wrap; gap: 1rem 3.5rem; margin: clamp(48px, 6vw, 80px) 0 0; padding: 1.4rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sc-facts div { display: flex; flex-direction: column-reverse; }
.sc-facts dd { margin: 0; font-family: var(--font-display); font-weight: 780; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sc-facts dt { color: var(--tide); font-size: .9rem; }

/* Rooms: steps left, member list right */
.sc-rooms { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(32px, 6vw, 96px); align-items: center; }
.sc-rooms h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.05; font-weight: 750; }
.sc .sc-sub { color: var(--tide); margin-top: .7rem; max-width: 56ch; }
.sc .sc-steps { list-style: none; margin-top: 1.8rem; display: flex; flex-direction: column; gap: 1.2rem; counter-reset: st; }
.sc-steps li { counter-increment: st; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: .9rem; }
.sc-steps li::before { content: counter(st); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; color: var(--coral-ink); border: 1px solid rgba(255, 94, 91, .4); }
.sc-steps b { font-size: 1.05rem; }
.sc-steps span { color: var(--tide); font-size: .94rem; }
.sc-members { border: 1px solid var(--line); border-radius: var(--r-lg); background: #0b1922; padding: .4rem; box-shadow: 0 30px 80px rgba(0, 0, 0, .4); }
.sc-members-head { display: flex; gap: .7rem; align-items: center; padding: .8rem .9rem; border-bottom: 1px solid var(--line); }
.sc-members-head div { display: flex; flex-direction: column; line-height: 1.25; }
.sc-members-head span:not(.lp-room-av) { color: var(--tide); font-size: .8rem; }
.sc-members ul { list-style: none; padding: .4rem .5rem; }
.sc-members li { display: flex; align-items: center; gap: .7rem; padding: .55rem .4rem; }
.sc-members li .lp-m-av { width: 34px; height: 34px; font-size: .85rem; }
.sc-members li b { font-size: .95rem; }
.sc-members em { margin-left: auto; font-style: normal; font-size: .76rem; color: var(--tide); }
.sc-members em.ai { color: var(--sea); }
.sc-invite { display: block; width: calc(100% - 1rem); margin: .2rem .5rem .6rem; padding: .7rem; border-radius: 12px; border: 1px dashed var(--line); background: transparent; color: var(--tide); font: inherit; font-weight: 650; cursor: default; }

/* Under the hood */
.sc-code-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.sc-code { margin: 0; min-width: 0; }
.sc-code figcaption { color: var(--pearl); font-weight: 650; font-size: .95rem; margin-bottom: .6rem; }
.sc-code .sc-code-after { margin-top: 1.1rem; color: var(--tide); font-weight: 600; }
.sc-code pre { margin: 0; padding: 1rem 1.1rem; border-radius: var(--r-md); background: #050d13; border: 1px solid var(--line); overflow-x: auto; }
.sc-code pre code { background: none; padding: 0; font-size: .82rem; line-height: 1.6; color: #bfe9de; white-space: pre; }

/* FAQ */
.sc-faq-list { max-width: 780px; border-top: 1px solid var(--line); }
.sc-faq-list details { border-bottom: 1px solid var(--line); }
.sc-faq-list summary { cursor: pointer; list-style: none; padding: 1.1rem 2.2rem 1.1rem 0; font-weight: 700; font-size: 1.05rem; position: relative; }
.sc-faq-list summary::-webkit-details-marker { display: none; }
.sc-faq-list summary::after { content: "+"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); color: var(--coral); font-size: 1.4rem; font-weight: 500; transition: transform .2s ease; }
.sc-faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.sc .sc-faq-list p { color: var(--tide); padding: 0 2.2rem 1.2rem 0; max-width: 68ch; }

/* Closing */
.sc-final { margin-top: clamp(72px, 10vw, 128px); padding: clamp(36px, 6vw, 64px); border-radius: var(--r-lg); text-align: center; background: radial-gradient(600px 300px at 50% 0%, rgba(255, 94, 91, .16), transparent 70%), var(--kelp); border: 1px solid var(--line); }
.sc-final h2 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.05; font-weight: 780; }
.sc .sc-final p { color: #c3d3db; margin: .8rem auto 0; max-width: 46ch; }
.sc-final .lp-cta-row { justify-content: center; }

@media (max-width: 1060px) {
  .sc-rooms { grid-template-columns: minmax(0, 1fr); }
  .sc-members { max-width: 420px; width: 100%; }
  .sc-code-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sc-facts { gap: 1rem 2rem; }
  .sc-final { text-align: left; }
  .sc-final .lp-cta-row { justify-content: flex-start; }
}