/* Shared first-fold start panel for talk2strangers landing pages.
   Loaded by every SEO page; styling reuses the /legal.css design tokens. */
.sc-gate-embed {
  max-width: 430px; margin: 18px 0 28px; padding: 18px;
  border: 1px solid var(--line); border-radius: 16px;
  background: oklch(0.21 0.025 265);
  display: flex; flex-direction: column; gap: 10px;
}
.scg-h { margin: 0 0 2px; font-weight: 700; font-size: 16px; color: var(--ink); }
.scg-chips, .scg-modes { display: flex; gap: 8px; }
.scg-chip, .scg-mode {
  flex: 1; padding: 9px 6px; border: 1px solid var(--line); border-radius: 10px;
  background: transparent; color: var(--ink); font: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.scg-chip[aria-pressed="true"], .scg-mode[aria-pressed="true"] {
  border-color: var(--accent); background: oklch(0.27 0.04 265);
}
.scg-cg { width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; color: #14141c; }
.scg-cg.man { background: oklch(0.72 0.13 250); }
.scg-cg.woman { background: oklch(0.72 0.16 320); }
.scg-cg.nb { background: oklch(0.80 0.16 150); }
.scg-name { display: flex; gap: 8px; }
#scg-name { flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: oklch(0.15 0.02 265); color: var(--ink); font: inherit; }
.scg-icon { padding: 0 12px; border: 1px solid var(--line); border-radius: 10px;
  background: transparent; color: var(--ink); cursor: pointer; font-size: 16px; }
.scg-cta { display: block; width: 100%; text-align: center; padding: 12px; border: none;
  border-radius: 12px; background: var(--accent); color: oklch(0.17 0.02 265);
  font: inherit; font-weight: 800; cursor: pointer; text-decoration: none; }
.scg-cta:hover { opacity: 0.9; }
.scg-legal { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }