/* Chart Growth Learning Hub — brand tokens (from chartgrowthhub.com) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..600;1,9..144,400..600&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --navy-950: #060a16;
  --navy-900: #0a1124;
  --navy-850: #0d162e;
  --navy-800: #111e3c;
  --navy-700: #1a2b54;
  --ink: #f4f7ff;
  --ink-dim: #9bb0d4;
  --ink-faint: #61759c;

  --gold: #d4af37;
  --gold-2: #f5d97a;
  --gold-soft: rgba(212,175,55,0.14);
  --green: #34d399;
  --red: #f87171;

  --border: rgba(159,176,212,0.12);
  --border-gold: rgba(212,175,55,0.28);
  --surface: rgba(255,255,255,0.025);
  --surface-2: rgba(255,255,255,0.045);

  --maxw: 1200px;
  --radius: 20px;
  --radius-sm: 13px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 30px 70px -24px rgba(0,0,0,0.75);
  --shadow-gold: 0 18px 50px -16px rgba(212,175,55,0.35);
}

/* ---- shared primitives, scoped to .cg ---- */
.cg, .cg *, .cg *::before, .cg *::after { box-sizing: border-box; }
.cg {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--navy-950);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.cg h1, .cg h2, .cg h3, .cg h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0;
}
.cg p { margin: 0; }

.cg .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold);
  display: inline-flex; align-items: center; gap: 12px;
}
.cg .eyebrow::before { content:""; width: 26px; height: 1px; background: var(--gold); opacity: .7; }

.cg .brand { display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:600; font-size:1.18rem; letter-spacing:-0.01em; }
.cg .brand .mark { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(135deg,var(--gold-2),var(--gold)); box-shadow:0 8px 22px -8px rgba(212,175,55,.5); flex-shrink:0; }
.cg .brand .mark svg { width:21px; height:21px; stroke:#1a1303; fill:none; stroke-width:2.2; }

.cg .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font-body); font-weight:600; font-size:0.98rem; padding:15px 28px; border-radius:999px; cursor:pointer; border:1px solid transparent; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.cg .btn-primary { background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:#1a1303; box-shadow:var(--shadow-gold); width:100%; }
.cg .btn-primary:hover { transform:translateY(-3px); box-shadow:0 26px 60px -16px rgba(212,175,55,.5); }
.cg .btn-ghost { background:var(--surface); color:var(--ink); border-color:var(--border); width:100%; }
.cg .btn-ghost:hover { border-color:var(--border-gold); }

.cg .field { display:grid; gap:7px; }
.cg .field label { font-size:0.82rem; font-weight:600; color:var(--ink); }
.cg .field input, .cg .field select {
  width:100%; padding:14px 16px; border-radius:var(--radius-sm);
  background:var(--navy-950); border:1px solid var(--border); color:var(--ink);
  font-family:var(--font-body); font-size:0.96rem; transition:border-color .2s, box-shadow .2s;
}
.cg .field input::placeholder { color:var(--ink-faint); }
.cg .field input:focus, .cg .field select:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }

.cg .divider { display:flex; align-items:center; gap:14px; color:var(--ink-faint); font-size:0.78rem; font-family:var(--font-mono); letter-spacing:.05em; }
.cg .divider::before, .cg .divider::after { content:""; flex:1; height:1px; background:var(--border); }

.cg .social-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cg .social-btn { display:flex; align-items:center; justify-content:center; gap:9px; padding:12px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border); color:var(--ink); font-size:0.9rem; font-weight:500; cursor:pointer; transition:border-color .2s; }
.cg .social-btn:hover { border-color:var(--border-gold); }
.cg .social-btn svg { width:18px; height:18px; }

.cg .fineprint { font-size:0.82rem; color:var(--ink-faint); }
.cg .fineprint a, .cg .link-gold { color:var(--gold-2); text-decoration:none; }
.cg .fineprint a:hover, .cg .link-gold:hover { text-decoration:underline; }

.cg .grid-bg {
  position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 80%);
}
.cg .badge { display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border-radius:999px; background:var(--surface); border:1px solid var(--border-gold); font-size:0.78rem; color:var(--ink-dim); font-family:var(--font-mono); letter-spacing:.04em; }
.cg .badge .dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(52,211,153,.6); }
.cg .ck { width:24px; height:24px; border-radius:7px; background:var(--gold-soft); border:1px solid var(--border-gold); display:grid; place-items:center; flex-shrink:0; }
.cg .ck svg { width:13px; height:13px; stroke:var(--gold-2); fill:none; stroke-width:2.4; }