/* ============================================================
   page.css — GSV Sales Solution Pages
   Shared styles for individual solution placeholder pages
   ============================================================ */

/* ── PAGE HERO ───────────────────────────────────────────────── */
.pg-hero {
  min-height:  100vh;
  background:  var(--white);
  padding-top: var(--nav-h);
  position:    relative;
  overflow:    hidden;
  display:     flex;
  align-items: center;
}

/* Reuse the same subtle dot-grid from the main hero */
.pg-hero__grid {
  position:   absolute;
  inset:      0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.07) 1px, transparent 1px);
  background-size:  36px 36px;
  pointer-events: none;
  z-index:    0;
}

.pg-hero__inner {
  position:       relative;
  z-index:        1;
  padding-top:    80px;
  padding-bottom: 80px;
}

/* Index tag e.g. "/0.1" */
.pg-hero__index {
  font-size:      12px;
  font-weight:    600;
  letter-spacing: 0.1em;
  color:          var(--gray-1);
  margin-bottom:  20px;
}

/* Solution name — very large */
.pg-hero__title {
  font-size:     clamp(52px, 10vw, 130px);
  font-weight:   900;
  letter-spacing:-0.04em;
  line-height:   1;
  color:         var(--black);
  margin-bottom: 28px;
}

/* Short descriptor */
.pg-hero__desc {
  font-size:   clamp(17px, 2vw, 22px);
  color:       var(--gray-1);
  max-width:   480px;
  line-height: 1.55;
  margin-bottom: 52px;
}

/* ── STATUS + CTA ROW ────────────────────────────────────────── */
.pg-hero__meta {
  display:    flex;
  align-items:center;
  gap:        20px;
  flex-wrap:  wrap;
  margin-bottom: 40px;
}

.pg-status-badge {
  background:    var(--off-white);
  border:        1px solid var(--gray-light);
  padding:       6px 16px;
  border-radius: 100px;
  font-size:     11px;
  font-weight:   700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:         var(--gray-2);
  white-space:   nowrap;
}

.pg-hero__meta p {
  font-size: 14px;
  color:     var(--gray-1);
}

.pg-hero__meta a {
  color:      var(--orange);
  font-weight:600;
}
.pg-hero__meta a:hover { text-decoration: underline; }

/* ── BACK LINK IN NAV ────────────────────────────────────────── */
.nav__back {
  font-size:   13px;
  font-weight: 600;
  color:       var(--gray-2);
  letter-spacing:0.02em;
  transition:  color var(--transition);
  display:     flex;
  align-items: center;
  gap:         6px;
}
.nav__back:hover { color: var(--black); }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .pg-hero__inner { padding-top: 56px; padding-bottom: 56px; }
  .pg-hero__meta  { flex-direction: column; align-items: flex-start; gap: 12px; }
}