/* ============================================================
   Salesloft Brand Guidelines — Shared Chrome
   Spread layout, header, cards, tables, footer, nav.
   Page-specific demo styles stay inline on each spread.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--black); }
body {
  font-family: var(--sans);
  color: var(--warm-150);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* -------- spread canvas (1440 fixed, zoom-fit via shared.js) -------- */
#stage { width: 100%; overflow: clip; }
#page { width: 1440px; position: relative; padding: 120px 96px 64px; }

/* -------- persistent top bar (matches the guide home) -------- */
.gtop {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 48px;
  background: linear-gradient(var(--black) 55%, transparent);
}
.gtop img { width: 132px; display: block; }
.gtop a { display: block; }
.gtop .r { display: flex; align-items: center; gap: 28px; }
.gtop .tag {
  font-family: var(--mono); font-weight: 500; font-size: 12px;
  letter-spacing: .48px; text-transform: uppercase; color: var(--gray-500);
}
.gtop a.tag { text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
.gtop a.tag:hover { color: var(--warm-100); }

/* -------- common text -------- */
.eyebrow {
  font-family: var(--mono); font-weight: 500; font-size: 12px;
  letter-spacing: .48px; text-transform: uppercase; color: var(--warm-500);
}
/* eyebrow doubles as the breadcrumb home */
.eyebrow a { color: inherit; text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
.eyebrow a:hover { color: var(--warm-100); }
.dot { color: var(--green); }

/* -------- back to index -------- */
a.back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-weight: 500; font-size: 12px;
  letter-spacing: .48px; text-transform: uppercase;
  color: var(--gray-500); text-decoration: none;
  margin-bottom: 28px;
  transition: color var(--dur-micro) var(--ease-out);
}
a.back .arr { color: var(--green); transition: transform var(--dur-structural) var(--ease-spring); display: inline-block; }
a.back:hover { color: var(--warm-150); }
a.back:hover .arr { transform: translateX(-4px); }

/* -------- header -------- */
.head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 56px; }
.head h1 {
  font-weight: 700; font-size: 88px; line-height: .95;
  letter-spacing: -.035em; color: var(--brown); margin-top: 20px;
}
.head h1 .lt { color: var(--warm-150); }
.head .intro { width: 360px; margin-top: 34px; font-size: 16px; line-height: 1.5; color: var(--gray-300); }
.head .intro b { color: var(--warm-150); font-weight: 700; }

/* -------- card grid -------- */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.row2 { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; }

.card {
  background: var(--panel); border: none;
  border-radius: 8px; padding: 32px; position: relative; overflow: hidden;
}
.card .num { font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--gray-700); }
.card h3 { font-weight: 700; font-size: 26px; letter-spacing: -.02em; color: var(--warm-150); margin: 8px 0 10px; }
.card p { font-size: 14px; line-height: 1.5; color: var(--gray-350); max-width: 520px; }
.card .used {
  margin-top: 14px; font-family: var(--mono); font-weight: 500; font-size: 11px;
  letter-spacing: .4px; text-transform: uppercase; color: var(--gray-500);
}

/* -------- live demo panel --------
   Hairline rule: containers carry a hairline ONLY when their fill matches
   the background behind them. The demo well (ink) sits on panel cards, so
   its color already defines the edge. */
.demo {
  margin-top: 24px; height: 180px; border-radius: 8px;
  background: var(--black); border: none;
  position: relative; overflow: hidden;
}

/* -------- token table -------- */
.tokens table { width: 100%; border-collapse: collapse; margin-top: 22px; }
.tokens td { padding: 11px 0; border-bottom: 1px solid var(--gray-800); font-size: 13px; vertical-align: top; }
.tokens tr:last-child td { border-bottom: none; }
.tokens .k { font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--green); white-space: nowrap; padding-right: 24px; }
.tokens .v { color: var(--gray-350); line-height: 1.45; }
.tokens .v b { color: var(--warm-150); font-weight: 700; }

/* -------- prev/next chapter cards --------
   Deliberately distinct from the content cards above:
   live chapters are solid green, upcoming ones a green tint. */
.pagenav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
.pagenav a, .pagenav .soon {
  display: block; text-decoration: none;
  background: var(--green); border: 1px solid var(--green);
  border-radius: 8px; padding: 28px 32px;
  transition: transform var(--dur-micro) var(--ease-spring), filter var(--dur-micro) var(--ease-out);
}
.pagenav .dir {
  font-family: var(--mono); font-weight: 500; font-size: 11px;
  letter-spacing: .4px; text-transform: uppercase; color: rgba(24,24,24,.55);
}
.pagenav .dir .arr { color: var(--black); }
.pagenav h3 {
  font-weight: 700; font-size: 30px; letter-spacing: -.02em;
  color: var(--black); margin-top: 10px;
  transition: transform var(--dur-structural) var(--ease-out);
}
.pagenav h3 .dot { color: var(--black); }
.pagenav .next { text-align: right; }
.pagenav a:hover { transform: translateY(-3px); filter: brightness(1.06); }
.pagenav a.prev-card:hover h3 { transform: translateX(-10px); }
.pagenav a.next:hover h3 { transform: translateX(10px); }

/* upcoming chapters: green tint, echoes the choreography bars */
.pagenav .soon {
  background: rgba(93, 226, 126, .1);
  border-color: rgba(93, 226, 126, .35);
}
.pagenav .soon .dir { color: rgba(93, 226, 126, .55); }
.pagenav .soon .dir .arr { color: var(--green); }
.pagenav .soon h3 { color: rgba(93, 226, 126, .6); }
.pagenav .soon h3 .dot { color: rgba(93, 226, 126, .6); }
.pagenav .soon .tag {
  display: block; margin-top: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .4px;
  text-transform: uppercase; color: rgba(93, 226, 126, .45);
}
.pagenav .soon.next .tag { text-align: right; }

/* -------- footer + prev/next nav -------- */
.foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--gray-800);
}
.foot .n {
  font-family: var(--mono); font-weight: 500; font-size: 12px;
  color: var(--gray-500); text-transform: uppercase; letter-spacing: .48px;
}
.foot img { width: 88px; }
.foot a.n { text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
.foot a.n:hover { color: var(--warm-150); }
.foot .nav { display: flex; gap: 24px; align-items: center; }

/* -------- index cover + TOC -------- */
.toc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
a.toc-card {
  display: block; text-decoration: none;
  background: var(--panel); border: 1px solid transparent; /* hairline only appears as the green hover cue */
  border-radius: 8px; padding: 28px 32px;
  transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-spring);
}
a.toc-card:hover { border-color: var(--green); transform: translateY(-2px); }
a.toc-card .num { font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--gray-700); }
a.toc-card h3 { font-weight: 700; font-size: 22px; letter-spacing: -.02em; color: var(--warm-150); margin-top: 8px; }
a.toc-card.soon { pointer-events: none; }
a.toc-card.soon h3 { color: var(--gray-700); }
a.toc-card.soon::after {
  content: 'coming soon'; display: block; margin-top: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .4px;
  text-transform: uppercase; color: var(--gray-700);
}