/* platform/index.html — visualizations demo + feature roadmap. */

.platform-hero {
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}
.platform-hero .section-lede { max-width: 60ch; font-size: 1.02rem; }

/* ---------- Visualization mockups ---------- */

.viz-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2rem);
}
@media (max-width: 980px) {
  .viz-grid { grid-template-columns: 1fr; }
}
.viz-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.viz-topbar {
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  display: flex;
  justify-content: space-between;
}
.viz-body { padding: clamp(1.25rem, 2.5vw, 1.75rem); flex: 1; }
.viz-caption {
  font-size: 0.82rem;
  color: var(--ink-2);
  padding: 0 clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 2.5vw, 1.75rem);
  margin: 0;
}

/* Org chart mockup */
.orgchart { display: flex; flex-direction: column; align-items: center; gap: 0; }
.org-node {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.55rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
}
.org-node small { display: block; font-weight: 500; color: var(--ink-3); font-size: 0.68rem; margin-top: 0.15rem; }
.org-connector { width: 1px; height: 1.1rem; background: var(--line); }
.org-row { display: flex; gap: 1.5rem; position: relative; }
.org-row::before {
  content: "";
  position: absolute;
  top: -1.1rem;
  left: calc(25% - 0.5px);
  right: calc(25% - 0.5px);
  height: 1px;
  background: var(--line);
}
.org-row.single::before { display: none; }

/* Buyer's-journey mockup */
.journey-track { display: flex; align-items: flex-start; gap: 0; }
.journey-stage { flex: 1; text-align: center; position: relative; }
.journey-stage:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 55%;
  right: -45%;
  height: 2px;
  background: var(--line);
}
.journey-dot {
  width: 1rem; height: 1rem;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--bg);
  margin: 0 auto 0.6rem;
  position: relative;
  z-index: 1;
}
.journey-stage.done .journey-dot { background: var(--teal); border-color: var(--teal); }
.journey-stage.current .journey-dot { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 0 4px var(--lime-light); }
:root[data-theme="dark"] .journey-stage.current .journey-dot, :root.force-dark .journey-stage.current .journey-dot { box-shadow: 0 0 0 4px color-mix(in oklab, var(--lime) 25%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .journey-stage.current .journey-dot { box-shadow: 0 0 0 4px color-mix(in oklab, var(--lime) 25%, transparent); } }
.journey-label { font-size: 0.72rem; font-weight: 700; color: var(--ink-2); }
.journey-stage.current .journey-label { color: var(--ink); }
.journey-detail {
  margin-top: 1.5rem;
  font-size: 0.84rem;
  color: var(--ink-2);
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
}
.journey-detail strong { color: var(--ink); }

/* Persona-card mockup */
.persona-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.1rem; }
.persona-avatar {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--teal);
  color: var(--teal-tint);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.85rem;
  flex-shrink: 0;
}
.persona-name { font-weight: 800; font-size: 0.98rem; color: var(--ink); margin: 0; }
.persona-role { font-size: 0.78rem; color: var(--ink-3); margin: 0; }
.persona-facts { list-style: none; margin: 0; padding: 0; }
.persona-facts li {
  font-size: 0.84rem;
  color: var(--ink-2);
  padding: 0.5rem 0;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}
.persona-facts li:first-child { border-top: none; }
.persona-facts .cite { font-family: var(--mono); font-size: 0.68rem; color: var(--lime-dark); flex-shrink: 0; }
:root[data-theme="dark"] .persona-facts .cite, :root.force-dark .persona-facts .cite { color: var(--lime); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .persona-facts .cite { color: var(--lime); } }

.viz-editable {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
  font-size: 0.76rem;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.viz-editable::before { content: "✎"; color: var(--lime-dark); }
:root[data-theme="dark"] .viz-editable::before, :root.force-dark .viz-editable::before { color: var(--lime); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .viz-editable::before { color: var(--lime); } }

/* ---------- Roadmap (reuses .planes / .plane-entry from brand.css) ---------- */

.roadmap-phase { margin-bottom: clamp(2rem, 4vw, 3rem); }
.roadmap-phase:last-child { margin-bottom: 0; }
.roadmap-phase-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.25rem;
}
.roadmap-phase-name { font-weight: 800; font-size: 1.05rem; color: var(--ink); }