@layer components {
  .pp-hero {
    padding: var(--space-12) 0 var(--space-8);
    background: radial-gradient(circle at top left, rgba(209, 180, 119, 0.18), transparent 55%), #0A0D0F;
  }

  .pp-hero__inner {
    align-items: center;
  }

  .pp-hero__content {
    max-width: 40rem;
  }

  .pp-main {
    padding: var(--space-10) 0 var(--space-16);
    background: radial-gradient(circle at bottom right, rgba(113, 140, 120, 0.16), transparent 55%), #101B19;
  }

  .pp-article {
    max-width: 900px;
    margin: 0 auto;
  }

  .pp-article__header {
    margin-bottom: var(--space-8);
  }

  .pp-section + .pp-section {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(102, 80, 68, 0.65);
  }

  .pp-section h3 {
    color: var(--color-highlight);
  }

  .pp-list {
    display: grid;
    gap: 0.35rem;
    margin-bottom: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .pp-list li::before {
    content: "•";
    margin-right: 0.5rem;
    color: var(--color-accent);
  }

  .pp-article__footer {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(102, 80, 68, 0.65);
  }

  .pp-article__note {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }
}

@media (max-width: 960px) {
  .pp-hero {
    padding-top: var(--space-10);
  }

  .pp-main {
    padding: var(--space-8) 0 var(--space-12);
  }
}

@media (max-width: 640px) {
  .pp-article {
    padding: var(--space-5);
  }
}

ul { list-style: none !important; }
.nav-toggle { flex-direction: column; }