.pp-hero {
      background: linear-gradient(135deg, #0f1f5c 0%, #332E87 50%, #00a14b 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); }

    .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: .85rem;
      color: #4a5568;
      text-decoration: none;
      padding: .3rem 0 .3rem .75rem;
      border-left: 2px solid #e2e8f0;
      margin-bottom: .12rem;
      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; }

    .pp-content { flex: 1; min-width: 0; }

    .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); }

    .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,#00a14b);
      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; }

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

    /* numbered sub-sections */
    .pp-subsections { display: flex; flex-direction: column; gap: .75rem; }
    .pp-sub {
      background: #f8fafc;
      border: 1px solid #e8ecf4;
      border-radius: 10px;
      padding: .9rem 1.1rem;
      font-size: .95rem;
      line-height: 1.75;
      color: #4a5568;
    }
    .pp-sub strong { color: #2d3748; }

    .pp-section ul { list-style: none; padding-left: 0; margin-bottom: 1rem; }
    .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,#00a14b);
    }
    .pp-section a { color: #332E87; text-decoration: underline; word-break: break-all; }
    .pp-section a:hover { color: #00a14b; }

    .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; }

    @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; }
    }