/* CreatorOS design system — tokens from the Claude Designer handoff (2026-07-16).
   Separate consumer brand (like Spotter): do NOT recolor to BizBot green.
   Display: Space Grotesk · Body: IBM Plex Sans · Mono: IBM Plex Mono */

:root {
  --co-cream: #faf7f0;
  --co-cream-2: #f4f1e8;
  --co-ink: #16130f;
  --co-body: #3d3931;
  --co-muted: #57524a;
  --co-subtle: #6b6559;
  --co-green: #0f7a52;
  --co-green-hover: #0b5c3d;
  --co-lime: #d8f24b;
  --co-card: #ffffff;
  --co-border: #e9e3d5;
  --co-hairline: #eee6d6;
  --co-hairline-2: #e4dece;
  --co-success-bg: #eefbe6;
  --co-success-border: #cdeeb0;
  --co-chip-dark: #26221b;
  --co-gold: #cdaa2e;
  --co-font-display: 'Space Grotesk', sans-serif;
  --co-font-body: 'IBM Plex Sans', sans-serif;
  --co-font-mono: 'IBM Plex Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--co-font-body);
  background: var(--co-cream);
  color: var(--co-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--co-lime); color: var(--co-ink); }
img { max-width: 100%; }
a { color: var(--co-green); }

h1, h2, h3, h4, .co-display { font-family: var(--co-font-display); color: var(--co-ink); }
h1 { font-size: clamp(38px, 6vw, 60px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 700; }
h2 { font-size: clamp(24px, 3.4vw, 30px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; }
h3 { font-size: 19px; line-height: 1.3; font-weight: 600; }
.co-lead { font-size: clamp(16px, 2.2vw, 19px); color: var(--co-muted); }
.co-num { font-family: var(--co-font-display); font-weight: 700; font-size: clamp(28px, 4vw, 38px); letter-spacing: -0.02em; color: var(--co-ink); }
.co-small { font-size: 13px; line-height: 1.5; color: var(--co-subtle); }
.co-mono { font-family: var(--co-font-mono); }

.co-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 600; color: var(--co-subtle);
}
.co-label--green { color: var(--co-green); }
.co-label--lime { color: var(--co-lime); }

.co-container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.co-section { padding: 64px 0; }

/* ---------- Buttons ---------- */
.co-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--co-font-body); font-weight: 600; font-size: 16px;
  padding: 14px 28px; border-radius: 100px; border: none; cursor: pointer;
  text-decoration: none; transition: background .15s ease, transform .1s ease;
  line-height: 1.2;
}
.co-btn:active { transform: translateY(1px); }
.co-btn--primary { background: var(--co-green); color: #fff; }
.co-btn--primary:hover { background: var(--co-green-hover); }
.co-btn--dark { background: var(--co-ink); color: #fff; }
.co-btn--dark:hover { background: #2b261f; }
.co-btn--lime { background: var(--co-lime); color: var(--co-ink); }
.co-btn--lime:hover { filter: brightness(0.94); }
.co-btn--ghost { background: transparent; color: var(--co-ink); border: 1px solid var(--co-hairline-2); }
.co-btn--ghost:hover { border-color: var(--co-ink); }
.co-btn--big { font-size: 18px; padding: 17px 36px; }
.co-btn--sm { font-size: 14px; padding: 9px 18px; }
.co-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- Cards / pills / badges ---------- */
.co-card {
  background: var(--co-card); border: 1px solid var(--co-border);
  border-radius: 16px; padding: 28px;
}
.co-card--tight { padding: 22px; }
.co-card--dark { background: var(--co-ink); border-color: var(--co-ink); color: #efece4; }
.co-card--dark h2, .co-card--dark h3, .co-card--dark .co-num { color: #fff; }
.co-chip { background: var(--co-chip-dark); color: #efece4; border-radius: 10px; padding: 12px 16px; }
.co-pill {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--co-hairline-2); border-radius: 100px;
  padding: 7px 15px; font-size: 13px; font-weight: 500; color: var(--co-muted);
  background: var(--co-card);
}
.co-pill--lime { background: var(--co-lime); border-color: var(--co-lime); color: var(--co-ink); font-weight: 600; }
.co-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--co-green); color: #fff; font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; border-radius: 100px; padding: 5px 14px; white-space: nowrap;
}
.co-success { background: var(--co-success-bg); border: 1px solid var(--co-success-border); border-radius: 14px; padding: 22px; }

/* ---------- Nav / footer ---------- */
.co-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 247, 240, .88); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--co-hairline);
}
.co-nav__inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; max-width: 1080px; margin: 0 auto; }
.co-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--co-font-display); font-weight: 700; font-size: 18px; color: var(--co-ink); }
.co-logo__mark {
  width: 22px; height: 22px; background: var(--co-green); border-radius: 6px;
  transform: rotate(45deg); position: relative; flex: none;
}
.co-logo__mark::after {
  content: ''; position: absolute; inset: 5px; background: var(--co-lime); border-radius: 3px;
}
.co-nav__links { display: flex; align-items: center; gap: 22px; }
.co-nav__links a { color: var(--co-muted); text-decoration: none; font-size: 15px; font-weight: 500; }
.co-nav__links a:hover { color: var(--co-ink); }
.co-footer { border-top: 1px solid var(--co-hairline); padding: 36px 0 48px; margin-top: 32px; }
.co-footer__inner { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; justify-content: space-between; }
.co-footer a { color: var(--co-subtle); text-decoration: none; font-size: 13px; }
.co-footer a:hover { color: var(--co-ink); }

/* ---------- Dark page variant (affiliate recruitment / partners) ---------- */
.co-dark { background: var(--co-ink); color: #d9d4c9; }
.co-dark h1, .co-dark h2, .co-dark h3, .co-dark .co-num { color: #fff; }
.co-dark .co-lead { color: #b5afa2; }
.co-dark .co-label { color: #8f887a; }
.co-dark .co-card { background: #1d1913; border-color: #2e2921; color: #d9d4c9; }
.co-dark .co-nav { background: rgba(22, 19, 15, .9); border-bottom-color: #2e2921; }
.co-dark .co-nav__links a { color: #b5afa2; }
.co-dark .co-nav__links a:hover { color: #fff; }
.co-dark .co-logo { color: #fff; }
.co-dark .co-footer { border-top-color: #2e2921; }
.co-dark .co-pill { background: #1d1913; border-color: #2e2921; color: #b5afa2; }
.co-dark ::selection { background: var(--co-lime); color: var(--co-ink); }

/* ---------- Tables ---------- */
.co-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.co-table th {
  background: var(--co-ink); color: #efece4; text-align: left; font-family: var(--co-font-body);
  font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; padding: 12px 16px;
}
.co-table th:first-child { border-radius: 10px 0 0 10px; }
.co-table th:last-child { border-radius: 0 10px 10px 0; }
.co-table td { padding: 14px 16px; border-bottom: 1px solid var(--co-hairline); color: var(--co-body); }
.co-table .co-money { color: var(--co-green); font-weight: 600; font-family: var(--co-font-display); }
.co-dark .co-table td { border-bottom-color: #2e2921; color: #d9d4c9; }

/* ---------- Forms ---------- */
.co-input, .co-select, .co-textarea {
  width: 100%; font-family: var(--co-font-body); font-size: 16px; color: var(--co-ink);
  background: #fff; border: 1px solid var(--co-hairline-2); border-radius: 10px; padding: 12px 14px;
}
.co-input:focus, .co-select:focus, .co-textarea:focus { outline: 2px solid var(--co-green); outline-offset: -1px; border-color: var(--co-green); }
.co-field { margin-bottom: 16px; }
.co-field label { display: block; font-size: 13px; font-weight: 600; color: var(--co-ink); margin-bottom: 6px; }
.co-error { color: #b23b2e; font-size: 14px; margin-top: 8px; }

/* ---------- Grids ---------- */
.co-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.co-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.co-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ---------- Marquee ---------- */
.co-marquee { overflow: hidden; border-top: 1px solid var(--co-hairline); border-bottom: 1px solid var(--co-hairline); padding: 14px 0; }
.co-marquee__track { display: flex; gap: 44px; width: max-content; animation: co-marquee 28s linear infinite; }
.co-marquee__track span { white-space: nowrap; font-size: 14px; color: var(--co-subtle); }
@keyframes co-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Utilities ---------- */
.co-center { text-align: center; }
.co-mt-8 { margin-top: 8px; } .co-mt-16 { margin-top: 16px; } .co-mt-24 { margin-top: 24px; }
.co-mt-32 { margin-top: 32px; } .co-mt-48 { margin-top: 48px; }
.co-strike { text-decoration: line-through; color: var(--co-subtle); }
.co-hidden { display: none !important; }
.co-divider { border: 0; border-top: 1px solid var(--co-hairline); margin: 24px 0; }
.co-check { color: var(--co-green); font-weight: 700; margin-right: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .co-grid-3, .co-grid-4 { grid-template-columns: 1fr 1fr; }
  .co-section { padding: 48px 0; }
}
@media (max-width: 640px) {
  .co-grid-2, .co-grid-3, .co-grid-4 { grid-template-columns: 1fr; }
  .co-nav__links { gap: 14px; }
  .co-nav__links a:not(.co-btn) { display: none; }
  .co-container { padding: 0 18px; }
}