/* Product pages (Platform menu): one dark hero, one visual, three steps. */
.pp-hero {
  padding: 120px 24px 96px;
  background:
    radial-gradient(ellipse 900px 420px at 50% 0%, rgba(127, 220, 200, 0.10), transparent 70%),
    radial-gradient(ellipse 700px 380px at 85% 90%, rgba(128, 57, 223, 0.12), transparent 70%),
    var(--space, #070a13);
  color: var(--starlight, #eef2f8);
  text-align: center;
}
.pp-hero-inner { max-width: 820px; margin: 0 auto; }
.pp-hero .space-kicker { justify-content: center; }
.pp-hero h1 {
  margin: 14px 0 16px;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: #fff;
}
.pp-sub { margin: 0 auto 30px; max-width: 600px; font-size: 19px; color: rgba(236, 240, 246, 0.72); }
.pp-hero .hero-ctas { justify-content: center; }

.pp-band { padding: 72px 24px; background: #0b0f1a; }
.pp-band .eyebrow { color: rgba(236, 240, 246, 0.55); }
.pp-band .eyebrow::after, .pp-band .rulewp::after { opacity: 0.2; }

/* question cards */
.pq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
.pq-card {
  display: flex; flex-direction: column;
  padding: 20px 20px 16px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #eef2f8;
}
.pq-you { margin: 0 0 4px; color: rgba(236,240,246,0.5); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.pq-q { margin: 0 0 12px; font-size: 17px; font-weight: 600; line-height: 1.3; }
.pq-a { margin: 0 0 16px; flex: 1; font-size: 15px; line-height: 1.6; color: rgba(236,240,246,0.82); }
.pq-cov, .pq-card .pq-cov {
  margin: 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08);
  color: rgba(236,240,246,0.5); font-family: var(--font-mono); font-size: 11px;
}

/* pipeline alerts */
.pa-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 26px; }
.pa-alert {
  display: flex; gap: 14px; padding: 16px 18px; border-radius: 14px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-left: 3px solid var(--fs); color: #eef2f8;
}
.pa-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,0.08); }
.pa-icon svg, .pa-icon img { width: 17px; height: 17px; fill: var(--fs); }
.pa-t { margin: 0 0 4px; font-weight: 600; font-size: 15.5px; }
.pa-d { margin: 0 0 4px; font-size: 14px; color: rgba(236,240,246,0.78); }
.pa-x { margin: 0; font-family: var(--font-mono); font-size: 11px; color: rgba(236,240,246,0.5); }

/* MCP call */
.pm-term {
  max-width: 760px; margin: 26px auto 0; padding: 22px 24px; border-radius: 16px;
  background: #060911; border: 1px solid rgba(255,255,255,0.1); color: #eef2f8;
}
.pm-line { margin: 0 0 10px; font-family: var(--font-mono); font-size: 13px; color: rgba(236,240,246,0.6); }
.pm-line b { color: #7fdcc8; font-weight: 500; }
.pm-who { padding: 2px 7px; margin-right: 6px; border-radius: 5px; background: rgba(128,57,223,0.25); color: #d9c6ff; }
.pm-q { margin: 0 0 14px; font-size: 17px; font-weight: 600; }
.pm-a { margin: 0 0 16px; font-size: 15.5px; line-height: 1.6; color: rgba(236,240,246,0.85); }

/* pipeline review dashboard reused from the homepage */
.pp-dash { max-width: 860px; margin: 26px auto 0; }

/* steps */
.pp-steps { padding: 72px 24px 24px; }
.pp-step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.pp-step span {
  display: inline-grid; place-items: center; width: 30px; height: 30px; margin-bottom: 12px;
  border-radius: 50%; border: 1px solid var(--rule); font-family: var(--font-mono); font-size: 12px; color: var(--grey);
}
.pp-step h3 { margin: 0 0 6px; font-size: 20px; }
.pp-step p { margin: 0; color: var(--grey); }

/* links to the other product pages */
.pp-more { padding: 48px 24px 80px; }
.pp-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pp-links a {
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--rule);
  color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 500;
}
.pp-links a:hover { border-color: var(--ink); }

.pp .cta-band .btn { margin-top: 18px; }

@media (max-width: 900px) {
  .pq-grid, .pa-list, .pp-step-grid { grid-template-columns: 1fr; }
  .pp-hero { padding: 88px 18px 64px; }
}