/* Sayso creators page — theysayso.online/creators/
   Reuses tokens/fonts declared in ../styles.css conventions, replicated
   here with corrected relative font paths (one level up from /creators/). */

/* ---- Self-hosted fonts (no CDN) ---- */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/fredoka-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
}

/* ---- Tokens (matches packages/site/styles.css) ---- */
:root {
  --paper: #FAF8F5;
  --ink: #1C1B1A;
  --ink-soft: #4A4642;
  --stone: #8A8580;
  --mist: #F0ECE7;
  --verified-teal: #2B6F6A;
  --teal-tint: #EAF2F1;

  --beauty-blush: #F0C7C0;
  --beauty-rose: #C98077;

  --sand: #DCD5C8;
  --sand-deep: #C9C0AE;

  --font-display: 'Fredoka', 'Trebuchet MS', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', monospace;
}

/* ---- Base ---- */
html, body { margin: 0; }
body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  background: var(--paper);
}
a { color: var(--verified-teal); }
a:hover { color: var(--ink); }
:focus-visible {
  outline: 3px solid var(--verified-teal);
  outline-offset: 2px;
  border-radius: 4px;
}
h1, h2, h3, p { margin: 0; }
button { font: inherit; }
* { box-sizing: border-box; }

/* ---- Top bar ---- */
.topbar {
  display: flex;
  align-items: center;
  padding: 18px 32px;
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.topbar-wordmark {
  font: 600 22px var(--font-display);
  color: var(--sand-deep);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.topbar-wordmark:hover { color: var(--ink); }

/* ---- Hero ---- */
.creators-hero {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: center;
  align-items: center;
}
.creators-hero h1 {
  font: 600 40px/1.2 var(--font-display);
  color: var(--ink);
  max-width: 620px;
}
.creators-hero p {
  font: 400 18px/1.6 var(--font-body);
  color: var(--ink-soft);
  max-width: 560px;
}

/* ---- Main two-column layout: showcase + signup ---- */
.creators-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 24px 64px;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}
.showcase-col { flex: 1 1 520px; min-width: 0; }
.signup-col { flex: 1 1 360px; min-width: 0; }

.section-eyebrow {
  font: 600 12px var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 8px;
}
.section-title {
  font: 600 24px var(--font-display);
  color: var(--ink);
  margin-bottom: 4px;
}
.section-lede {
  font: 400 15px/1.5 var(--font-body);
  color: var(--ink-soft);
  margin-bottom: 20px;
}

/* ---- Dashboard showcase card ---- */
.showcase-card {
  background: var(--paper);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 20px;
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.demo-caption {
  font: 500 11px var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--stone);
  background: var(--mist);
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: 20px;
}
.demo-week {
  font: 600 20px/1.2 var(--font-display);
  color: var(--ink);
}
.demo-range {
  font: 400 13px var(--font-body);
  color: var(--stone);
  margin-top: 2px;
}

/* Stat tiles */
.stat-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.stat-tile {
  flex: 1;
  min-width: 150px;
  background: var(--mist);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-num {
  font: 600 28px var(--font-display);
  color: var(--ink);
}
.stat-num--accent { color: var(--beauty-rose); }
.stat-label {
  font: 500 12.5px var(--font-body);
  color: var(--stone);
}

/* Callout with proof chip */
.callout {
  background: var(--paper);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.callout-heading {
  font: 600 15px var(--font-body);
  color: var(--ink);
}
.proof-chip-demo {
  display: flex;
  gap: 10px;
  padding: 11px;
  border-radius: 14px;
  background: var(--paper);
  border: 1.5px solid var(--verified-teal);
  max-width: 440px;
}
.proof-thumb {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: repeating-linear-gradient(45deg, #E4DED6, #E4DED6 4px, #EFEAE3 4px, #EFEAE3 8px);
}
.proof-body-demo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.proof-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}
.proof-time {
  font: 500 10px var(--font-mono);
  color: var(--stone);
}
.proof-verified {
  font: 600 9px var(--font-body);
  color: var(--verified-teal);
  background: var(--teal-tint);
  padding: 2px 6px;
  border-radius: 20px;
  letter-spacing: .02em;
}
.proof-quote-demo {
  font: 500 13px/1.3 var(--font-body);
  color: var(--ink);
}
.proof-product-demo {
  font: 600 12px var(--font-body);
  color: var(--ink);
}

/* Content ideas list */
.ideas-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ideas-title {
  font: 600 17px var(--font-display);
  color: var(--ink);
}
.ideas-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.idea-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--mist);
  flex-wrap: wrap;
}
.idea-text-col {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.idea-question {
  font: 500 14px var(--font-body);
  color: var(--ink);
}
.idea-count {
  font: 400 12px var(--font-body);
  color: var(--stone);
}
.idea-btn {
  flex: none;
  border: none;
  padding: 9px 16px;
  border-radius: 20px;
  font: 600 13px var(--font-body);
  color: var(--paper);
  background: var(--beauty-rose);
  cursor: default;
}

/* ---- Sign-up form ---- */
.signup-card {
  background: var(--mist);
  border-radius: 20px;
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 24px;
}
.signup-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font: 600 13px var(--font-body);
  color: var(--ink);
}
.field input {
  font: 400 15px var(--font-body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 10px;
  padding: 11px 13px;
}
.field input:focus-visible {
  outline: 3px solid var(--verified-teal);
  outline-offset: 1px;
}
.signup-submit {
  margin-top: 4px;
  align-self: flex-start;
  text-decoration: none;
  font: 600 14px var(--font-body);
  color: var(--paper);
  background: var(--ink);
  border: none;
  padding: 13px 22px;
  border-radius: 24px;
  cursor: pointer;
}
.signup-submit:hover { background: #000; }
.privacy-note {
  font: 400 13px/1.5 var(--font-body);
  color: var(--stone);
}
.form-status {
  font: 500 13px var(--font-body);
  color: var(--verified-teal);
  min-height: 1.2em;
}

/* ---- Footer ---- */
.creators-footer {
  border-top: 1px solid rgba(0,0,0,.07);
  padding: 24px 32px 40px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  font: 400 14px var(--font-body);
  color: var(--stone);
}
.creators-footer a { text-decoration: none; }
.creators-footer a:hover { text-decoration: underline; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .creators-main { flex-direction: column; }
  .signup-card { position: static; }
}
@media (max-width: 480px) {
  .creators-hero h1 { font-size: 30px; }
  .creators-hero { padding: 40px 20px 28px; }
  .stat-row { flex-direction: column; }
  .idea-row { flex-direction: column; align-items: flex-start; }
  .idea-btn { align-self: flex-start; }
}