/* ---------------------------------------------------------------
   Chapters 5-8: How It Works, Infrastructure, Roadmap, CTA
   Includes the shared "pinned track" component used by chapters
   5 (journey) and 7 (roadmap).
--------------------------------------------------------------- */

/* ================= Shared: pinned scroll-scrubbed track ================= */
.pin-wrap { position: relative; width: 100%; z-index: var(--z-content); }
#journeyPinWrap { height: 340vh; }
#roadmapPinWrap { height: 260vh; }

.pin-inner {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.chapter__header--wide { max-width: 56ch; }

.track {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-xl);
  padding-top: 30px;
}
.track__line {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 60px;
  overflow: visible;
}
.track__line-bg { stroke: var(--border-strong); stroke-width: 2; fill: none; }
.track__line-fg {
  stroke: var(--gold);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 1160;
  stroke-dashoffset: 1160;
  filter: drop-shadow(0 0 6px rgba(201,169,110,0.6));
}

.track__node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
  text-align: center;
  color: var(--text-faint);
  padding: 0 4px;
}
.track__node-icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--navy-800);
  color: var(--mist-300);
  transition: border-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.track__node-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-dim);
  transition: color var(--dur-med) var(--ease-out);
}
.track__node-sub {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.03em;
}
.track__node.is-active .track__node-sub { color: var(--mist-100); }
.track__node.is-active .track__node-icon {
  border-color: var(--gold);
  color: var(--gold-soft);
  box-shadow: 0 0 22px rgba(201,169,110,0.35);
  transform: scale(1.08);
}
.track__node.is-active .track__node-label { color: var(--white); }

.track__detail {
  position: relative;
  margin-top: var(--space-lg);
  min-height: 130px;
}
.track__panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.track__panel.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.track__panel-num {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 600;
  color: var(--gold);
  opacity: 0.8;
  flex: none;
}
.track__panel h4 { margin-bottom: 8px; }
.track__panel p { color: var(--text-dim); max-width: 46ch; }
.track__panel-media {
  flex: none;
  width: 128px; height: 96px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-left: auto;
  border: 1px solid var(--border);
}
.track__panel-media img { width: 100%; height: 100%; object-fit: cover; }

.pin-hint {
  margin-top: var(--space-lg);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
}

@media (max-width: 900px) {
  .track__node-label { font-size: 11px; }
  .track__panel { flex-direction: column; }
  .track__panel-media { margin-left: 0; width: 100%; height: 140px; }
  .track__detail { min-height: 220px; }
}
@media (max-width: 640px) {
  .track__node-sub { display: none; }
  .track {
    overflow-x: auto;
    justify-content: flex-start;
    gap: 28px;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .track::-webkit-scrollbar { display: none; }
  .track__line { display: none; }
  .track__node { flex: none; min-width: 74px; }
}

/* -------- roadmap-specific milestone list -------- */
.track--roadmap .track__node-icon { color: var(--steel-400); }
.track__detail--milestones { min-height: 210px; }
.track__detail--milestones .track__panel { flex-direction: column; gap: 4px; }
.milestones li {
  position: relative;
  padding: 9px 0 9px 26px;
  color: var(--text-dim);
  font-size: 15.5px;
  border-bottom: 1px solid var(--border);
}
.milestones li:last-child { border-bottom: none; }
.milestones li::before {
  content: "";
  position: absolute;
  left: 4px; top: 18px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

/* ================= CHAPTER 6 — INFRASTRUCTURE =================
   A single row of cards in normal document flow — no absolutely-
   positioned elements escaping their container, so this chapter's
   real rendered height always matches what gets measured and can
   never silently overlap neighboring content. Font sizes match the
   rest of the deck (commercial-card, problemcard, etc.) rather than
   shrinking to fit — the Commercial Framework content that used to
   share this screen now has its own chapter (7) instead, so there's
   no need to compress type to make room. */
.chapter--infrastructure .chapter__bg img { filter: brightness(0.5) saturate(1.1); }

.trust-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.trust-card {
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: rgba(8, 15, 24, 0.5);
  backdrop-filter: blur(10px);
}
.trust-card .icon { color: var(--gold); margin-bottom: 10px; }
.trust-card h4 { margin-bottom: 6px; }
.trust-card p { font-size: 14.5px; color: var(--text-dim); line-height: 1.55; }

@media (max-width: 1080px) {
  .trust-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .trust-grid { grid-template-columns: 1fr; }
}

/* ================= CHAPTER 7 — COMMERCIAL FRAMEWORK ================= */
.chapter--commercial { background: var(--navy-900); }

.commercial-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.commercial-card {
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
}
.commercial-card .icon { color: var(--steel-400); margin-bottom: 10px; }
.commercial-card h4 { margin-bottom: 6px; }
.commercial-card p { font-size: 14.5px; color: var(--text-dim); line-height: 1.55; }

@media (max-width: 760px) {
  .commercial-row { grid-template-columns: 1fr; }
}

/* ================= CHAPTER 9 — FIT CHECK ================= */
.chapter--fitcheck { background: var(--navy-900); }

/* ================= CHAPTER 10 — CTA ================= */
.chapter--cta .chapter__bg img { filter: brightness(0.4) saturate(0.9); object-position: center 30%; }
body.presenter-mode .chapter--cta { padding-bottom: var(--space-2xs); }
body.presenter-mode .chapter--cta .nextsteps { margin-top: var(--space-sm); }
body.presenter-mode .chapter--cta .cta__actions { margin-top: var(--space-sm); }
body.presenter-mode .chapter--cta .cta__tagline { margin-top: var(--space-2xs); }
body.presenter-mode .chapter--cta .bonus { margin-top: var(--space-sm); }
.chapter--cta .chapter__scrim--full { background: linear-gradient(180deg, var(--navy-900) 0%, rgba(8,15,24,0.85) 30%, rgba(8,15,24,0.92) 100%); }

.fitcheck h2 { margin-top: var(--space-sm); }
.fitcheck .body-copy { margin-top: var(--space-sm); margin-bottom: var(--space-xl); }
.fitcheck__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}
.fitcheck__label {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-soft);
  margin-bottom: var(--space-xs);
}
.fitcheck__label--no { color: var(--steel-400); }

.cta-main h2 { margin-top: var(--space-xs); }

.nextsteps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.nextsteps__item {
  padding: var(--space-sm) var(--space-xs) 0;
  border-top: 1px solid var(--border-strong);
}
.nextsteps__num {
  display: block;
  font-family: var(--font-mono);
  color: var(--gold);
  font-size: 13px;
  margin-bottom: 10px;
}
.nextsteps__item h4 { margin-bottom: 6px; }
.nextsteps__item p { font-size: 14.5px; color: var(--text-dim); }

.cta__actions {
  display: flex;
  gap: 14px;
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}
.cta__tagline {
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}

.bonus {
  margin-top: var(--space-xl);
  border-top: 1px solid var(--border);
  padding-top: var(--space-md);
}
.bonus summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--mist-300);
  list-style: none;
}
.bonus summary::-webkit-details-marker { display: none; }
.bonus summary span { display: flex; align-items: center; gap: 8px; }
.bonus summary:hover { color: var(--gold-soft); }
.bonus__chevron { transition: transform var(--dur-fast) var(--ease-out); }
.bonus[open] .bonus__chevron { transform: rotate(90deg); }
.bonus__body { padding-top: var(--space-md); max-width: 62ch; }
.bonus__body .checklist { margin: var(--space-xs) 0; }
.bonus__eligibility { font-size: 13px; color: var(--text-dim); margin-top: var(--space-xs); }

@media (max-width: 900px) {
  .fitcheck__grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .nextsteps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .nextsteps { grid-template-columns: 1fr; }
}