/* ── Page layout ── */
    .pp-wrap {
      max-width: 860px;
      margin: 0 auto;
      padding: 5rem 1.5rem 6rem;
    }

    /* ── Hero banner ── */
    .pp-hero {
      background: linear-gradient(135deg, #332E87 0%, #1b9dd9 100%);
      padding: 4rem 0 3rem;
      text-align: center;
      color: #fff;
    }
    .pp-hero .eyebrow {
      font-size: .8rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      font-weight: 700;
      color: rgba(255,255,255,.7);
      margin-bottom: .75rem;
      display: block;
    }
    .pp-hero h1 {
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 800;
      margin: 0 0 1rem;
      line-height: 1.15;
    }
    .pp-hero .pp-updated {
      font-size: .9rem;
      color: rgba(255,255,255,.65);
    }

    /* ── Sticky sidebar TOC ── */
    .pp-layout {
      display: flex;
      gap: 3rem;
      max-width: 1200px;
      margin: 0 auto;
      padding: 4rem 1.5rem 6rem;
      align-items: flex-start;
    }
    .pp-toc {
      flex: 0 0 220px;
      position: sticky;
      top: 90px;
    }
    .pp-toc-title {
      font-size: .75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: #8892a4;
      margin-bottom: 1rem;
    }
    .pp-toc a {
      display: block;
      font-size: .88rem;
      color: #4a5568;
      text-decoration: none;
      padding: .35rem 0 .35rem .75rem;
      border-left: 2px solid #e2e8f0;
      margin-bottom: .15rem;
      transition: color .2s, border-color .2s;
      line-height: 1.4;
    }
    .pp-toc a:hover,
    .pp-toc a.active {
      color: #332E87;
      border-left-color: #332E87;
      font-weight: 600;
    }

    /* ── Main content ── */
    .pp-content {
      flex: 1;
      min-width: 0;
    }

    /* Section card */
    .pp-section {
      background: #fff;
      border: 1px solid #e8ecf4;
      border-radius: 16px;
      padding: 2rem 2.25rem;
      margin-bottom: 1.5rem;
      scroll-margin-top: 100px;
      box-shadow: 0 2px 12px rgba(51,46,135,.04);
      transition: box-shadow .2s;
    }
    .pp-section:hover {
      box-shadow: 0 4px 24px rgba(51,46,135,.09);
    }

    /* Section header */
    .pp-section-head {
      display: flex;
      align-items: center;
      gap: .9rem;
      margin-bottom: 1.25rem;
    }
    .pp-icon {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      background: linear-gradient(135deg,#332E87,#1b9dd9);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #fff;
    }
    .pp-section h2 {
      font-size: 1.2rem;
      font-weight: 700;
      color: #1a202c;
      margin: 0;
    }

    /* Content typography */
    .pp-section p {
      font-size: .97rem;
      line-height: 1.8;
      color: #4a5568;
      margin-bottom: 1rem;
    }
    .pp-section p:last-child { margin-bottom: 0; }

    .pp-section ul, .pp-section ol {
      padding-left: 1.4rem;
      margin-bottom: 1rem;
    }
    .pp-section ul { list-style: none; padding-left: 0; }
    .pp-section ul li {
      position: relative;
      padding-left: 1.4rem;
      font-size: .97rem;
      line-height: 1.75;
      color: #4a5568;
      margin-bottom: .4rem;
    }
    .pp-section ul li::before {
      content: '';
      position: absolute;
      left: 0;
      top: .65em;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: linear-gradient(135deg,#332E87,#1b9dd9);
    }

    /* Sub-label inside list */
    .pp-section ul li strong {
      color: #2d3748;
    }

    /* Links */
    .pp-section a {
      color: #332E87;
      text-decoration: underline;
      word-break: break-all;
    }
    .pp-section a:hover { color: #1b9dd9; }

    /* Highlight box */
    .pp-highlight {
      background: linear-gradient(135deg,rgba(51,46,135,.05),rgba(27,157,217,.05));
      border: 1px solid rgba(51,46,135,.15);
      border-radius: 10px;
      padding: 1rem 1.25rem;
      margin-bottom: 1rem;
      font-size: .95rem;
      color: #2d3748;
      line-height: 1.7;
    }
    .pp-highlight:last-child { margin-bottom: 0; }

    /* Contact card */
    .pp-contact-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
      margin-top: .5rem;
    }
    .pp-contact-item {
      display: flex;
      align-items: flex-start;
      gap: .65rem;
      font-size: .92rem;
      color: #4a5568;
      line-height: 1.5;
    }
    .pp-contact-item svg {
      flex-shrink: 0;
      margin-top: .1rem;
      color: #332E87;
    }
    .pp-contact-item a {
      color: #332E87;
    }

    /* Mobile */
    @media (max-width: 860px) {
      .pp-layout { flex-direction: column; padding: 2rem 1rem 4rem; }
      .pp-toc { position: static; flex: none; width: 100%; display: none; }
      .pp-section { padding: 1.5rem 1.25rem; }
    }