/* ===== Tokens ===== */
:root{
  --side: 280px;               
  --maxw: 1280px;              
  --purple: #4f46e5;            
  --navBG: #f3f4ff;            
  --border: rgba(20,16,78,.10); 
}


.pp-top__inner{
  max-width: var(--maxw);
  margin: 0 auto;
}
.pp-title{
  font-weight:800;
  color: var(--purple);
  font-size: clamp(22px, 2.6vw, 28px);
  margin: 8px 0 6px;
}
.pp-updated-inline{
  margin: 0 0 8px;
  color:#6b7280;
}
.pp-intro{
  color:#4b5563;
  line-height:1.7;
  max-width: 920px;
}

/* ===== Layout: 280px | 1fr ===== */
.pp-layout{
  max-width: var(--maxw);
  margin: 8px auto 48px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: var(--side) 1fr;
  gap: 32px;
}

/* ===== Sidebar ===== */
.pp-sidebar{
  position: sticky;
  top: 24px;
  align-self: start;
}
.pp-box{
  width: var(--side);
  background:#fff;
  border:1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
}
.pp-lu{
  background: var(--navBG);
  color:#4b4f67;
  font-weight:600;
  font-size:14px;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 10px;
}
.pp-nav{ display:flex; flex-direction:column; gap: 4px; }
.pp-link{
  display:block;
  text-decoration:none;
  color:#52525B;
  font-size: 14px;
  font-weight: 600px;
line-height: 1.5;
  padding: 12px;
  border-radius: 10px;
  transition: .18s ease;
}
.pp-link:hover{ background:#f3f6fa; }
.pp-link.is-active{ background:#ebe8ff; color:#2e2796; box-shadow: inset 0 0 0 1px #cfc7ff; }

/* ===== Content ===== */
.pp-content{
  min-width: 0;
}
.pp-section + .pp-section{ margin-top: 24px; }

.pp-section h2{
  font-family:"Montserrat",sans-serif;
  font-weight:700;
  font-size: 18px;
  color:#1f2937;
  margin: 0 0 6px;
}
.pp-section p{
  color:#374151;
  line-height:1.7;
  margin: 0 0 6px;
}
.pp-section ul{
  margin: 6px 0 0 18px;
  color:#374151;
  line-height:1.7;
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  :root{ --side: 260px; }
}
@media (max-width: 860px){
  .pp-layout{ grid-template-columns: 1fr; gap: 18px; }
  .pp-box{ width: 100%; }
  .pp-sidebar{ position: static; }
}
