/*
  socialgen - static site styles.

  Self-contained by requirement. This copy is deployed to a CDN that may sit behind the
  Great Firewall, so it makes NO external requests of any kind: no Google Fonts, no CDN
  script, no analytics, no remote images. A page that silently fails to load a typeface is
  a page that fails verification, and a blocked request is indistinguishable from a broken
  site to whoever is reviewing it.

  The type stack is therefore the system one. It renders instantly everywhere and looks
  native on the reviewer's own machine, which is worth more here than a specific typeface.
*/

:root {
  color-scheme: dark;

  --bg: #0a0a0a;
  --surface: #171717;
  --surface-2: #262626;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.17);

  --text: #fafafa;
  --text-2: #a4a4a4;
  --text-3: #8a8a8a;

  --accent: #00d191;
  --accent-ink: #0a0a0a;

  --r-inner: 10px;
  --r-mid: 14px;
  --r-outer: 18px;
  --r-pill: 999px;

  --shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 4px rgba(0, 0, 0, 0.35),
    0 8px 20px rgba(0, 0, 0, 0.35);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: inherit; }

.wrap { width: 100%; max-width: 1040px; margin-inline: auto; padding-inline: 24px; }
.narrow { max-width: 720px; }

/* ---------------------------------------------------------------- header */

header.site {
  position: sticky; top: 0; z-index: 20;
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.bar { display: flex; align-items: center; gap: 24px; height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 500; }
.mark { width: 22px; height: 22px; border-radius: 7px; background: var(--accent); display: block; }
nav.site { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
nav.site a {
  padding: 7px 12px; border-radius: var(--r-pill); font-size: 14px;
  color: var(--text-2); text-decoration: none; transition: color .15s, background .15s;
}
nav.site a:hover { color: var(--text); background: var(--surface-2); }

/* ---------------------------------------------------------------- type */

h1 {
  font-size: clamp(34px, 5.4vw, 54px);
  line-height: 1.06; font-weight: 500; letter-spacing: -0.025em;
}
h2 {
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.14; font-weight: 500; letter-spacing: -0.02em;
}
h3 { font-size: 16px; font-weight: 500; letter-spacing: -0.005em; }
p { color: var(--text-2); }
.lede { font-size: clamp(17px, 2vw, 19px); color: var(--text-2); max-width: 60ch; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-2); font-weight: 500;
}
.eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }

/* ---------------------------------------------------------------- sections */

section { padding-block: clamp(56px, 9vw, 104px); }
section + section { border-top: 1px solid var(--line); }
.hero { padding-block: clamp(72px, 12vw, 128px) clamp(56px, 9vw, 96px); }
.stack { display: grid; gap: 18px; }
.center { text-align: center; justify-items: center; }
.center .lede { margin-inline: auto; }

/* ---------------------------------------------------------------- controls */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding-inline: 20px; border: 0; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text);
  font: inherit; font-size: 14.5px; font-weight: 500; text-decoration: none;
  cursor: pointer; transition: background .15s, transform .1s;
}
.btn:hover { background: #303030; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: #12e0a0; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- cards */

.grid { display: grid; gap: 14px; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.card {
  background: var(--surface); border-radius: var(--r-outer);
  box-shadow: var(--shadow-1); padding: 22px;
  display: grid; gap: 9px; align-content: start;
}
.card h3 { color: var(--text); }
.card p { font-size: 14.5px; line-height: 1.6; }

.stat { display: grid; gap: 4px; }
.stat .n {
  font-size: clamp(26px, 3.4vw, 34px); font-weight: 500; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat .k { font-size: 13.5px; color: var(--text-2); }

/* Numbered steps. The rule between them is what makes them read as a sequence. */
.steps { display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding-block: 22px; }
.step + .step { border-top: 1px solid var(--line); }
.step .i {
  width: 30px; height: 30px; border-radius: var(--r-inner);
  background: var(--surface-2); color: var(--text-2);
  display: grid; place-items: center; font-size: 13px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: 4px; }
.step p { font-size: 14.5px; }

code, .mono { font-family: var(--mono); font-size: 13px; }
pre {
  background: var(--surface); border-radius: var(--r-mid); box-shadow: var(--shadow-1);
  padding: 16px 18px; overflow-x: auto; font-family: var(--mono); font-size: 13px;
  color: var(--text-2); line-height: 1.7;
}
pre b { color: var(--accent); font-weight: 500; }

.note {
  background: var(--surface); border-radius: var(--r-outer);
  box-shadow: var(--shadow-1); padding: 20px 22px;
}
.note p + p { margin-top: 10px; }

/* ---------------------------------------------------------------- legal */

.legal { padding-block: 56px 88px; }
.legal h1 { font-size: clamp(28px, 4vw, 38px); margin-bottom: 10px; }
.legal .updated { font-size: 13.5px; color: var(--text-3); margin-bottom: 34px; }
.legal h2 { font-size: 19px; margin-top: 34px; margin-bottom: 10px; }
.legal p, .legal li { font-size: 15px; color: var(--text-2); }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 12px 0 0 20px; display: grid; gap: 7px; }
.legal a { color: var(--accent); }
.legal dl { margin-top: 12px; display: grid; gap: 10px; }
.legal dt { font-size: 13px; color: var(--text-3); }
.legal dd { font-size: 15px; color: var(--text); margin-inline-start: 0; }

/* ---------------------------------------------------------------- footer */

footer.site { border-top: 1px solid var(--line); padding-block: 34px 48px; }
.foot { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.foot a { color: var(--text-2); text-decoration: none; font-size: 14px; }
.foot a:hover { color: var(--text); }
.foot .sp { margin-left: auto; font-size: 13.5px; color: var(--text-3); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}