@charset "UTF-8";
/* --------------------------------------------------
   Global colour tokens (assumed to exist in :root)
   -------------------------------------------------- */
/* :root {
      --white:#fff;
      --black:#000;
      --gold:#d4af37;
} */

/* ========== 1. LAYOUT CONTAINER ========== */
.whitepaper-container {
  max-width: 1000px;
  margin: 80px auto;
  padding: 30px;
  background: var(--white);
  color: var(--black);
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(0,0,0,.2);
}
.whitepaper-container h1 {
  text-align: center;
  font-size: 36px;
  margin-bottom: 20px;
  color: var(--gold);
}
.whitepaper-container h2 {
  color: var(--gold);
  margin: 40px 0 12px;
  font-size: 24px;
}
.whitepaper-container section { margin-bottom: 40px; }

/* ========== 2. DOWNLOAD LINK ========== */
.download-link { text-align: center; margin-top: 30px; }
.download-link a {
  background: var(--gold);
  color: var(--black);
  padding: 10px 20px;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
}

/* ========== 3. DROPDOWN TOC ========== */
details.toc-dropdown { max-width: 400px; margin: 0 auto 30px; }
details.toc-dropdown > summary {
  cursor: pointer; padding: 12px 20px;
  border: 2px solid var(--gold); border-radius: 6px;
  background: transparent; color: var(--gold); font-weight: 700;
  list-style: none;
}
details.toc-dropdown > summary::-webkit-details-marker { display: none; }
details.toc-dropdown .toc-menu {
  margin-top: 8px; border: 1px solid #ddd; border-radius: 4px; overflow: hidden;
}
details.toc-dropdown .toc-menu a {
  display: block; padding: 10px 14px;
  background: #fafafa; color: var(--black);
  text-decoration: none; border-bottom: 1px solid #eee;
}
details.toc-dropdown .toc-menu a:last-child { border-bottom: none; }
details.toc-dropdown .toc-menu a:hover { background: var(--gold); color: var(--black); }

/* ========== 4. TEAM GRID ========== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* exactly 2 cards on ≥768 px */
  gap: 2rem;
  margin-top: 1.5rem;
}
@media (max-width: 768px) {        /* 1 card on phones */
  .team-grid { grid-template-columns: 1fr; padding: 0 1rem; }
}
.team-member {
  background: #fff;
  border-radius: 8px;
  text-align: center;
  padding: 1.5rem 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  display: flex; flex-direction: column; align-items: center;
}
.team-member img {
  width: 100px; height: 100px;
  object-fit: cover; border-radius: 50%;
  margin-bottom: 1rem; border: 3px solid #f0f0f0;
}
.team-member p { font-size: .95rem; line-height: 1.5; margin: 0; }
.team-member a { color: #1a73e8; font-weight: 500; text-decoration: none; }
.team-member a:hover { text-decoration: underline; }

/* ========== 5. PARTNERS ROW ========== */
.partners-grid {
  display: flex; flex-wrap: nowrap;
  justify-content: space-between; align-items: center;
  gap: 10px; overflow: hidden;
}
.partner-logo { flex: 1 1 80px; text-align: center; }
.partner-logo img {
  max-width: 100%; max-height: 50px;
  height: auto; object-fit: contain; border-radius: 6px;
}

/* ========== 6. KPI CARDS ========== */
.kpi-stats {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin-bottom: 20px;
}
.stat-card {
  background: #fafafa; padding: 16px;
  border-radius: 8px; width: 150px;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  text-align: center;
}
.stat-card h3 { margin: 0; font-size: 18px; color: var(--gold); }
.stat-card p { font-size: 24px; margin: 6px 0 0; }
#kpiChart { display: none; }  /* hidden until JS shows it */

/* ========== 7. COMPETITIVE TABLE ========== */
.comp-table-wrapper {
  overflow-x: auto;
  margin-bottom: 30px;
}
.comp-table {
  width: 100%;
  table-layout: fixed;
}

.comp-table th,
.comp-table td {
  border: 1px solid #ddd;
  padding: 8px 12px;
  text-align: center;
  overflow-wrap: anywhere;      /* modern word-break */
  font-size: .95rem;
}
.comp-table th { background: var(--gold); color: var(--black); }


/* ========== 8. VESTING CHART SIZING ========== */
#vestingContainer {
  max-width: 400px; max-height: 400px;
  margin: 0 auto 40px; position: relative;
}
#vestingContainer canvas { width: 100%!important; height: 100%!important; }
#vestingChart { width: 100%!important; height: 300px!important; }
@media (min-width: 1400px) { #vestingContainer { transform: scale(.9); } }
@media (max-width: 768px)  { #vestingChart { height: 200px!important; } }

/* ========== 9. RESPONSIVE TWEAKS (≤768 px) ========== */
@media (max-width: 768px) {
  .whitepaper-container { margin: 40px 10px; padding: 20px; }
  .whitepaper-container h1 { font-size: 28px; }
  .whitepaper-container h2 { font-size: 20px; }

  details.toc-dropdown,
  details.toc-dropdown > summary,
  details.toc-dropdown .toc-menu a { font-size: 14px; }

  .comp-table th,
  .comp-table td { font-size: 13px; padding: 5px 6px; }

  .stat-card { width: 45%; }
  .stat-card p { font-size: 20px; }

  .download-link a { padding: 8px 16px; font-size: 14px; }
}

/* ========== 10. SCREEN vs PRINT VISIBILITY ========== */
@media screen  { .pdf-only { display: none !important; } }
@media print   { .pdf-only { display: block !important; } }

/* ========== 11. PAGE-BREAK HINTS FOR PDF ========== */
section,
.comp-table-wrapper,
.team-grid,
.partners-grid { page-break-inside: avoid; }

/* ========== 12. MISC ========== */
#pdf-btn { cursor: pointer; }