/*
 * RAXE Website — /platform product hub
 * Scope: .page-platform only. All classes prefixed plx-.
 * Depends on: tokens.css, base.css, components/*
 */

/* ─────────────────────────────────────────────
 * HERO
 * ───────────────────────────────────────────── */
.plx-hero {
  padding-top: var(--space-32);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.plx-hero h1 {
  margin-top: var(--space-5);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.plx-hero-sub {
  color: var(--text-muted);
  max-width: 680px;
  margin: var(--space-6) auto var(--space-8);
  font-size: var(--fs-body-lg);
}
.plx-hero-cta {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.plx-hero-proof {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-10);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-dim);
  letter-spacing: var(--tracking-wide);
}
.plx-hero-proof .plx-proof-sep { color: var(--text-ghost); }

/* ─────────────────────────────────────────────
 * SAY/DO GAP — session timeline panel
 * ───────────────────────────────────────────── */
.plx-gap-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-12);
  align-items: center;
}
.plx-gap-copy h2 { margin-top: var(--space-3); }
.plx-gap-copy p {
  color: var(--text-muted);
  margin-top: var(--space-4);
}

.plx-tl-row {
  display: grid;
  grid-template-columns: 62px 88px 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: 12px var(--space-5);
  border-bottom: 1px solid rgba(56, 189, 248, 0.05);
}
.plx-tl-row:last-of-type { border-bottom: none; }
.plx-tl-time {
  font-size: 10px;
  color: var(--text-ghost);
  padding-top: 3px;
}
.plx-tl-src {
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  text-align: center;
  border: 1px solid transparent;
  line-height: 1.6;
}
.plx-src-gateway { background: rgba(56, 189, 248, 0.10); color: var(--cyan); border-color: rgba(56, 189, 248, 0.25); }
.plx-src-sdk     { background: rgba(52, 211, 153, 0.10); color: #34d399; border-color: rgba(52, 211, 153, 0.25); }
.plx-src-kernel  { background: rgba(232, 121, 249, 0.10); color: var(--magenta); border-color: rgba(232, 121, 249, 0.25); }
.plx-src-aws     { background: rgba(245, 158, 11, 0.10); color: var(--amber); border-color: var(--border-amber); }
.plx-tl-msg {
  font-size: 11px;
  color: rgba(232, 244, 255, 0.72);
  line-height: 1.6;
}
.plx-tl-msg .plx-tl-note { color: var(--text-dim); }
.plx-tl-msg .plx-tl-flag { color: var(--amber); font-weight: var(--weight-semibold); }
.plx-tl-footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-default);
  background: rgba(4, 13, 26, 0.5);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}
.plx-tl-footer strong { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* ─────────────────────────────────────────────
 * ACTS — SEE / CATCH / PROVE
 * ───────────────────────────────────────────── */
.plx-act {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-12);
  padding: var(--space-14) 0;
  border-top: 1px solid var(--border-subtle);
}
.plx-act:first-of-type { border-top: none; padding-top: var(--space-10); }
.plx-act-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-brand);
  margin-bottom: var(--space-3);
}
.plx-act h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-4);
}
.plx-act-lead {
  color: var(--text-muted);
  font-size: var(--fs-body);
}
.plx-act-body { display: flex; flex-direction: column; gap: var(--space-4); }
.plx-act-body .btn-text { align-self: flex-start; }

/* Surface tiles (SEE) — 2×2 */
.plx-surface-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.plx-surface-tile {
  background: var(--surface-overlay);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}
.plx-surface-tile h4 {
  font-size: var(--fs-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.plx-surface-tile p {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}

.plx-feature {
  background: var(--surface-overlay);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}
.plx-feature h4 {
  font-size: var(--fs-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.plx-feature p {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}
.plx-feature-hi { border-color: var(--border-strong); background: rgba(56, 189, 248, 0.04); }

/* Signal list (CATCH) */
.plx-signal {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  align-items: start;
}
.plx-signal:last-of-type { border-bottom: none; }
.plx-signal-num {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: var(--weight-bold);
  color: var(--text-brand);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(56, 189, 248, 0.05);
}
.plx-signal h4 {
  font-size: var(--fs-body-sm);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-1);
}
.plx-signal p {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* Chips */
.plx-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.plx-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  background: rgba(56, 189, 248, 0.05);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Hash-chain schematic (PROVE) */
.plx-chain {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  margin-top: var(--space-2);
}
.plx-chain-node {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 4px 10px;
  background: rgba(56, 189, 248, 0.04);
  white-space: nowrap;
}
.plx-chain-arrow { color: var(--text-ghost); }
.plx-chain-ok {
  color: var(--teal);
  border-color: rgba(0, 229, 192, 0.3);
  background: rgba(0, 229, 192, 0.08);
  font-weight: var(--weight-bold);
}
.plx-chain-label {
  font-size: 9px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-ghost);
  width: 100%;
  margin-top: var(--space-1);
}

/* Proof-numbers strip */
.plx-proof-strip {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-dim);
  margin-top: var(--space-10);
  letter-spacing: var(--tracking-wide);
}
.plx-proof-strip strong { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* ─────────────────────────────────────────────
 * CODING AGENTS
 * ───────────────────────────────────────────── */
.plx-agents-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-10);
}
.plx-agent-card {
  background: var(--surface-overlay);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.plx-agent-card h3 {
  font-size: var(--fs-body);
  font-weight: var(--weight-bold);
}
.plx-agent-card p {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}
.plx-attr-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.plx-attr {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  line-height: 1.6;
}
.plx-attr-live       { background: rgba(0, 229, 192, 0.10); color: var(--teal); border-color: rgba(0, 229, 192, 0.25); }
.plx-attr-explicit   { background: rgba(56, 189, 248, 0.10); color: var(--cyan); border-color: rgba(56, 189, 248, 0.25); }
.plx-attr-ingest     { background: rgba(148, 167, 184, 0.10); color: var(--text-muted); border-color: rgba(148, 167, 184, 0.25); }
.plx-attr-inferred   { background: rgba(245, 158, 11, 0.10); color: var(--amber); border-color: var(--border-amber); }
.plx-attr-correlated { background: rgba(232, 121, 249, 0.10); color: var(--magenta); border-color: rgba(232, 121, 249, 0.25); }
.plx-agents-coda {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-body-sm);
  max-width: 620px;
  margin: var(--space-8) auto 0;
}

/* ─────────────────────────────────────────────
 * CLOUD — the fourth collection surface
 * ───────────────────────────────────────────── */
.plx-cloud-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--space-12);
  align-items: center;
}
.plx-cloud-copy h2 { margin-top: var(--space-3); }
.plx-cloud-copy p {
  color: var(--text-muted);
  margin-top: var(--space-4);
}
.plx-cloud-links {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}
.plx-cloud-qualifiers {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: var(--space-10) auto 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-dim);
  letter-spacing: var(--tracking-wide);
  max-width: 900px;
  text-align: center;
}
.plx-cloud-qualifiers li {
  position: relative;
  padding-left: var(--space-4);
}
.plx-cloud-qualifiers li::before {
  content: '\00B7';
  position: absolute;
  left: 0;
  color: var(--text-ghost);
}

/* ─────────────────────────────────────────────
 * DEPLOYMENT
 * ───────────────────────────────────────────── */
.plx-deploy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
}
.plx-deploy-grid .card { padding: var(--space-6); }
.plx-deploy-grid h3 {
  font-size: var(--fs-body);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-3);
}
.plx-deploy-grid p {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.plx-footnote {
  text-align: center;
  font-size: var(--fs-label);
  color: var(--text-dim);
  margin-top: var(--space-6);
}
.plx-footnote a { color: var(--text-brand); text-decoration: none; }
.plx-footnote a:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────
 * GO DEEPER HUB GRID
 * ───────────────────────────────────────────── */
.plx-hub-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-10);
}
.plx-hub-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  text-decoration: none;
}
.plx-hub-card .plx-hub-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--cyan);
  opacity: 0.85;
}
.plx-hub-card h3 {
  font-size: var(--fs-body);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}
.plx-hub-card p {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}
.plx-hub-card .plx-hub-link {
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: var(--fs-caption);
  font-weight: var(--weight-semibold);
  color: var(--text-brand);
}

/* ─────────────────────────────────────────────
 * FINAL CTA
 * ───────────────────────────────────────────── */
.plx-cta {
  text-align: center;
  position: relative;
  overflow: hidden;
}
.plx-cta-sub {
  color: var(--text-muted);
  max-width: 560px;
  margin: var(--space-4) auto var(--space-8);
}

/* ─────────────────────────────────────────────
 * RESPONSIVE
 * ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .plx-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plx-agents-grid { grid-template-columns: 1fr; }
  .plx-gap-grid, .plx-cloud-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .plx-act { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-10) 0; }
}
@media (max-width: 640px) {
  .plx-agents-grid, .plx-hub-grid, .plx-deploy-grid, .plx-surface-grid { grid-template-columns: 1fr; }
  .plx-tl-row { grid-template-columns: 74px 1fr; }
  .plx-tl-time { display: none; }
}