/* Shared public info pages: /merchants and /users-info */

.pi-hero {
  background: #080f0e;
  padding: 2.5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.pi-hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 120%, oklch(0.28 0.09 168) 0%, #080f0e 65%);
  pointer-events: none;
}

.pi-hero-grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.pi-hero-inner {
  position: relative;
  z-index: 1;
}

.pi-kicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
  margin: 0 0 0.5rem;
}

.pi-title {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 0.4rem;
}

.pi-accent {
  color: oklch(0.75 0.13 168);
}

.pi-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin: 0 0 1.25rem;
}

.pi-section {
  background: var(--background);
  padding: 5rem 0;
}

.pi-section--muted {
  background: var(--muted);
}

.pi-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: center;
}

.pi-heading {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 900;
  margin: 0 0 0.75rem;
  line-height: 1.1;
}

.pi-copy,
.pi-step-copy {
  font-size: 14px;
  color: var(--muted-foreground);
  line-height: 1.75;
  margin: 0;
}

.pi-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 2rem 0;
  border-top: 1px solid var(--border);
}

.pi-step:last-child {
  border-bottom: 1px solid var(--border);
}

.pi-step-num {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 900;
  color: #047c68;
  line-height: 1;
  letter-spacing: 0;
}

.pi-step-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 0.4rem;
}

@media (max-width: 860px) {
  .pi-section {
    padding: 3.5rem 0;
  }

  .pi-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
  }

  .pi-step {
    grid-template-columns: 52px 1fr;
    gap: 1rem;
    padding: 1.5rem 0;
  }
}

@media (max-width: 520px) {
  .pi-hero {
    padding: 2.25rem 0;
  }

  .pi-step {
    grid-template-columns: 1fr;
  }
}