/* ── Get-started / onboarding ─────────────────────────────── */
.gs { background: #fff; }
.gs-grid { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }

/* left value panel */
.gs-left {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  padding: 2.4rem 2.8rem; color: #fff; overflow: hidden;
  background: linear-gradient(160deg, #257c83 0%, #1f6a70 42%, #154a4f 100%);
}
.gs-left::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(247,170,11,.34), transparent 64%); top: -160px; right: -140px; }
.gs-brand .brand-word { color: #fff; }
.gs-left-mid { position: relative; max-width: 30ch; }
.gs-left-mid h2 { font-family: var(--display); font-weight: 300; letter-spacing: -.03em; line-height: 1.08; font-size: clamp(1.8rem, 3vw, 2.7rem); }
.gs-left-mid p { color: rgba(255,255,255,.82); margin-top: 1rem; font-size: 1.02rem; line-height: 1.6; }
.gs-snip { margin-top: 1.8rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 16px; padding: 1rem; backdrop-filter: blur(2px); max-width: 360px; }
.gs-snip-row { display: flex; gap: .6rem; align-items: flex-start; }
.gs-snip .ava { width: 32px; height: 32px; border-radius: 8px; flex: none; }
.gs-snip-name { font-family: var(--display); font-weight: 600; font-size: .85rem; display: inline-flex; align-items: center; gap: .35rem; }
.gs-snip p { color: rgba(255,255,255,.92); font-size: .9rem; margin-top: .25rem; }
.gs-left-foot { position: relative; color: rgba(255,255,255,.6); font-size: .82rem; font-family: var(--mono); }

/* right connect panel */
.gs-right { display: grid; place-items: center; padding: 2rem; }
.gs-card { width: min(420px, 92%); text-align: center; }
.gs-card h1 { font-family: var(--display); font-weight: 300; letter-spacing: -.04em; line-height: 1.05; font-size: clamp(2.2rem, 4vw, 3rem); color: var(--ink); }
.gs-sub { color: var(--ink-soft); margin: .9rem 0 1.8rem; font-size: 1.02rem; }

.gs-connect { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left;
  font-family: var(--body); font-weight: 600; font-size: 1rem; padding: .85rem 1.15rem; border-radius: 12px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; margin-bottom: .6rem;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.gs-connect:not(.gs-soon):hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--ink); }
/* Primary CTA = whichever live channel is first (Slack). Rest are clean bordered rows. */
.gs-channels .gs-connect:first-of-type:not(.gs-soon) { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: var(--shadow-md); }
.gs-slack { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: var(--shadow-md); }
.gs-soon { color: var(--muted); cursor: not-allowed; }
.gs-soon em { font-style: normal; font-family: var(--mono); font-size: .68rem; background: var(--bg-soft); border: 1px solid var(--line); padding: .1rem .4rem; border-radius: 999px; margin-left: auto; }

/* real brand marks (inline SVG) */
.gs-logo { width: 22px; height: 22px; flex: none; display: inline-flex; }
.gs-logo svg { width: 100%; height: 100%; display: block; }
.gs-ico2 { font-size: 1.15rem; line-height: 1; flex: none; width: 22px; text-align: center; }
/* slack 4-dot mark (static fallback button) */
.gs-ico { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 18px; height: 18px; flex: none; }
.gs-ico i { border-radius: 50%; }
.gs-ico i:nth-child(1){ background:#36c5f0 } .gs-ico i:nth-child(2){ background:#2eb67d }
.gs-ico i:nth-child(3){ background:#ecb22e } .gs-ico i:nth-child(4){ background:#e01e5a }
.gs-ico.teams { background: #5059c9; border-radius: 5px; }

.gs-alt { color: var(--muted); font-size: .8rem; line-height: 1.5; margin: -.2rem 0 .6rem; text-align: center; }
.gs-alt a { color: var(--teal); font-weight: 600; }
.gs-alt b { color: var(--ink-soft); }
.gs-contact { display: inline-block; color: var(--ink-soft); font-size: .92rem; margin-top: .4rem; }
.gs-contact:hover { color: var(--ink); }
.gs-err { color: #c0392b; font-size: .88rem; min-height: 1.1em; margin-top: .8rem; }
.gs-fine { color: var(--muted); font-size: .82rem; margin-top: 1.6rem; }
.gs-signin { color: var(--ink-soft); font-size: .9rem; margin-top: .6rem; }
.gs-signin a { color: var(--teal); font-weight: 600; }

@media (max-width: 820px) {
  /* Kill the scroll: collapse the tall marketing hero into a slim branded header
     so every channel option is visible above the fold. The headline lives on the
     card ("Add Jess to your life"), so the left panel's copy is redundant here. */
  .gs-grid { grid-template-columns: 1fr; min-height: 0; }
  .gs-left { min-height: 0; padding: 1rem 1.4rem; flex-direction: row; align-items: center; }
  .gs-left::before { display: none; }
  .gs-left-mid, .gs-left-foot { display: none; }
  .gs-snip { display: none; }
  .gs-right { padding: 1.5rem 1.3rem 2.4rem; place-items: start center; }
  .gs-card { width: 100%; }
  .gs-card h1 { font-size: 1.95rem; }
  .gs-sub { margin: .65rem 0 1.1rem; font-size: .96rem; }
  .gs-fine { margin-top: 1rem; }
  .gs-signin { margin-top: .5rem; }
}

/* ── onboarding banner on the connect (dashboard) page ── */
.ob-banner { background: linear-gradient(160deg, #fff, #f2fafa); border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.3rem; margin-bottom: 1.4rem; display: flex; align-items: center; gap: 1rem; box-shadow: var(--shadow-sm); }
.ob-banner .ob-emoji { font-size: 1.5rem; }
.ob-banner h3 { font-family: var(--display); font-weight: 500; letter-spacing: -.02em; font-size: 1.1rem; margin: 0; }
.ob-banner p { color: var(--ink-soft); font-size: .9rem; margin: .15rem 0 0; }
.ob-banner .ob-body { flex: 1; }
.ob-banner .ob-open { margin-left: auto; white-space: nowrap; align-self: center; }
.ob-bar { height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; margin: .6rem 0 .35rem; max-width: 360px; }
.ob-bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--teal), var(--orange)); transition: width .6s var(--ease); }
.ob-prog { font-family: var(--mono); font-size: .76rem; color: var(--muted); margin: 0; }

/* finish page */
.fin { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 2.4rem 1.4rem; background:
  radial-gradient(60% 50% at 50% 0%, rgba(247,170,11,.14), transparent 60%),
  radial-gradient(50% 40% at 30% 0%, rgba(130,195,204,.22), transparent 60%), #fff; }
.gs-brand-dark .brand-word { color: var(--ink); }
.fin-card { width: min(440px, 94%); text-align: center; margin-top: 6vh; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 2.4rem 2rem; box-shadow: var(--shadow-lg); }
.fin-emoji { font-size: 2.4rem; }
.fin-card h1 { font-family: var(--display); font-weight: 300; letter-spacing: -.04em; font-size: 2.2rem; margin: .6rem 0 .5rem; }
.fin-sub { color: var(--ink-soft); margin-bottom: 1.6rem; }
.fin-profile { margin-top: 1.8rem; text-align: left; border-top: 1px solid var(--line); padding-top: 1.4rem; }
.fin-profile h3 { font-family: var(--display); font-weight: 500; font-size: 1rem; margin: 0 0 1rem; }
.fin-profile h3 span { color: var(--muted); font-weight: 400; }
.fin-profile label { display: block; font-size: .86rem; color: var(--ink-soft); margin-bottom: .9rem; }
.fin-profile select { width: 100%; margin-top: .3rem; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px; font-family: var(--body); font-size: .92rem; color: var(--ink); background: #fff; }
.fin-check { display: flex !important; align-items: center; gap: .5rem; }
.fin-check input { width: auto; margin: 0; }
.fin-wide { width: min(560px, 94%); text-align: left; }
.fin-wide h1 { text-align: left; font-size: 1.9rem; }
.btn-sm { padding: .45rem .85rem; font-size: .85rem; }

/* channel picker */
.ch-bulk { display: flex; align-items: center; gap: 1rem; margin: 1.2rem 0 .8rem; }
.ch-count { font-family: var(--mono); font-size: .78rem; color: var(--muted); }
.ch-list { display: flex; flex-direction: column; gap: .35rem; max-height: 320px; overflow-y: auto; margin-bottom: 1.2rem; }
/* Channel search — workspaces with many channels are unusable without it. */
.ch-search { width: 100%; font: inherit; font-size: .95rem; padding: .6rem .8rem; margin-bottom: .7rem;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.ch-search:focus { outline: 2px solid var(--teal, #489fb5); outline-offset: 1px; border-color: transparent; }
.ch-row { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.ch-row:hover { background: var(--bg-soft); }
.ch-row input { width: auto; margin: 0; }
.ch-name { font-weight: 500; }
.ch-meta { margin-left: auto; font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.ch-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }