/* /chinh-sach/ and /chinh-sach/<slug>/ — reading pages. Loaded after pages.css. Prefix po-. */
.po{position:relative;padding:clamp(96px,10vw,128px) 0 clamp(64px,8vw,104px);overflow-x:clip}
.po-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(50% 42% at 84% 2%,var(--accent-glow),#0000 72%),radial-gradient(40% 36% at 0 60%,color-mix(in srgb,var(--cyan) 9%,transparent),#0000 74%)}
.po-bg::after{content:"";position:absolute;inset:0;opacity:.42;background-image:linear-gradient(var(--edge) 1px,#0000 1px),linear-gradient(90deg,var(--edge) 1px,#0000 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(70% 46% at 72% 8%,#000,#0000 78%);mask-image:radial-gradient(70% 46% at 72% 8%,#000,#0000 78%)}
.po-wide{position:relative;z-index:1;width:min(1220px,100%);margin:0 auto;padding:0 5%}

/* style.css has bare rules header{position:fixed;display:flex} and nav{display:flex;gap:36px} (nav is hidden on phones): the head is a div, the navs are reset here */
.po-toc,.po-more{display:block;gap:0;font-size:inherit}

/* ---------- head ---------- */
.po-head{margin-top:26px;max-width:860px}
.po-head h1{margin:0;font-size:clamp(34px,4.8vw,60px);line-height:1.06;font-weight:600;letter-spacing:-.03em;text-wrap:balance}
.po-head .lead{max-width:62ch}
.po-meta{display:flex;flex-wrap:wrap;gap:8px 10px;margin:24px 0 0;padding:0;font-size:12px;letter-spacing:.02em;color:var(--text-4)}
.po-meta span{padding:6px 12px;border:1px solid var(--edge);border-radius:999px;background:var(--accent-bg)}

/* ---------- document ---------- */
.po-layout{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start;margin-top:clamp(36px,4.6vw,60px)}
.po-side{position:sticky;top:96px;display:grid;gap:18px}
.po-toc{padding:18px 18px 14px;border:1px solid var(--edge);border-radius:16px;background:var(--accent-bg)}
.po-toc p{margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.po-toc ol{list-style:none;margin:0;padding:0;counter-reset:po-toc}
.po-toc li{counter-increment:po-toc;margin:0}
.po-toc a{display:flex;gap:10px;padding:7px 0;font-size:13.5px;line-height:1.45;color:var(--text-2);transition:color .2s}
.po-toc a::before{content:counter(po-toc,decimal-leading-zero);flex:none;font-size:11px;font-variant-numeric:tabular-nums;line-height:1.9;color:var(--text-4)}
.po-toc a:hover{color:var(--cyan)}
.po-help{padding:16px 18px;border:1px solid var(--edge);border-radius:16px}
.po-help b{display:block;font-size:14px;font-weight:600;color:var(--text)}
.po-help p{margin:6px 0 0;font-size:13.5px;line-height:1.6;color:var(--text-2)}
.po-help p a{color:var(--cyan);font-weight:600}
.po-help-cta{display:inline-flex;gap:6px;margin-top:10px;font-size:13px;font-weight:600;color:var(--accent)}
.po-help-cta:hover{color:var(--cyan)}

.po-doc{min-width:0;max-width:760px;counter-reset:po-sec}
.po-doc>section{counter-increment:po-sec;scroll-margin-top:96px;padding:0 0 clamp(26px,3.2vw,38px);margin:0 0 clamp(26px,3.2vw,38px);border-bottom:1px solid var(--edge)}
.po-doc>section:last-of-type{border-bottom:0;margin-bottom:12px}
.po-doc h2{display:flex;align-items:baseline;gap:14px;margin:0 0 16px;font-size:clamp(21px,2.2vw,26px);line-height:1.25;font-weight:600;letter-spacing:-.015em;color:var(--text)}
.po-doc h2::before{content:counter(po-sec,decimal-leading-zero);flex:none;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--accent)}
.po-doc p{margin:0 0 14px;font-size:16px;line-height:1.82;color:var(--text-2);text-wrap:pretty}
.po-doc b{font-weight:600;color:var(--text)}
.po-doc a{color:var(--cyan);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--cyan) 40%,transparent);text-underline-offset:3px}
.po-doc a:hover{text-decoration-color:currentColor}
.po-doc code{padding:1px 7px;border:1px solid var(--edge);border-radius:6px;background:var(--accent-bg);font-size:.88em;color:var(--text)}
.po-doc ul{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.po-doc ul li{position:relative;padding-left:22px;font-size:16px;line-height:1.75;color:var(--text-2)}
.po-doc ul li::before{content:"";position:absolute;left:2px;top:.78em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.po-steps{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:14px;counter-reset:po-step}
.po-steps li{position:relative;counter-increment:po-step;padding:0 0 0 48px;font-size:16px;line-height:1.75;color:var(--text-2)}
.po-steps li::before{content:counter(po-step);position:absolute;left:0;top:0;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--accent-line);background:var(--accent-bg);font-size:13px;font-weight:600;color:var(--accent)}
.po-note{margin:22px 0 0;padding:14px 18px;border:1px solid var(--accent-line);border-radius:14px;background:var(--accent-bg);font-size:14px;line-height:1.7;color:var(--text-2)}

/* ---------- cards (other policies, hub) ---------- */
.po-more{margin-top:clamp(40px,5vw,72px)}
.po-more h2{margin:0 0 20px;font-size:clamp(20px,2vw,24px);font-weight:600;letter-spacing:-.01em}
.po-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.po-cards-hub{margin-top:clamp(34px,4.4vw,56px);grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.po-card{position:relative;display:grid;gap:6px;align-content:start;height:100%;padding:22px 22px 20px;border:1px solid var(--edge);border-radius:18px;background:linear-gradient(160deg,var(--accent-bg),#0000 70%);transition:border-color .25s,transform .25s}
.po-card:hover{border-color:var(--accent-line);transform:translateY(-3px)}
.po-card:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.po-card-ico{width:42px;height:42px;display:grid;place-items:center;margin-bottom:8px;border-radius:14px;border:1px solid var(--accent-line);background:var(--accent-bg);color:var(--accent)}
.po-card-ico .ico{width:20px;height:20px}
.po-card-n{position:absolute;right:20px;top:18px;font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.08em;color:var(--text-4)}
.po-card b{font-size:16px;font-weight:600;line-height:1.35;color:var(--text)}
.po-card small{font-size:13.5px;line-height:1.6;color:var(--text-4)}
.po-card em{margin-top:6px;font-style:normal;font-size:13px;font-weight:600;color:var(--accent)}
.po-hub-help{max-width:420px;margin-top:clamp(28px,3.6vw,44px)}

@media (max-width:900px){
  .po-layout{grid-template-columns:minmax(0,1fr)}
  .po-side{position:static}
  .po-toc ol{columns:2;column-gap:24px}
  .po-toc li{break-inside:avoid}
  .po-doc{max-width:none}
}
@media (max-width:560px){
  .po-toc ol{columns:1}
  .po-doc h2{gap:10px}
  .po-doc p,.po-doc ul li,.po-steps li{font-size:15.5px}
  .po-steps li{padding-left:44px}
  .po-cards,.po-cards-hub{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.po-card{transition:none}.po-card:hover{transform:none}}
