.pp-page {
  padding: var(--space-12) 0;
  width: min(calc(100% - (var(--container-gutter) * 2)), 760px);
  margin: 0 auto;
}

.pp-page__header {
  margin-bottom: var(--space-8);
  text-align: center;
}

.pp-page__header h1 {
  margin: 0;
}

.pp-page__body {
  line-height: var(--line-height-body);
}

.pp-page__body p {
  margin: 0 0 var(--space-6);
}

.pp-page__body p:last-child {
  margin-bottom: 0;
}

.pp-page__lead {
  text-align: center;
}

.pp-page__body h2,
.pp-page__body h3 {
  margin: var(--space-8) 0 var(--space-4);
}

.pp-page__body h3 {
  margin-top: var(--space-6);
}

.pp-page__body :where(ul, ol) {
  margin: 0 0 var(--space-6);
  padding-left: var(--space-8);
}

.pp-page__body :where(ul) {
  list-style: disc;
}

.pp-page__body :where(ol) {
  list-style: decimal;
}

.pp-page__body :where(li) {
  margin-bottom: var(--space-3);
}

.pp-page__body :where(li):last-child {
  margin-bottom: 0;
}

.pp-page__body hr {
  margin: var(--space-8) 0;
  border: 0;
  border-top: 1px solid var(--border-color);
}

.pp-page__body a {
  text-decoration: underline;
  text-underline-offset: 0.16em;
  overflow-wrap: anywhere;
}

.pp-page__body img,
.pp-page__body video {
  /* 本家は height:80vh / width:auto の中央寄せ。縦長動画の左右に暗帯が出ないよう合わせる。 */
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: var(--rounded);
}

.pp-page__body video {
  background: rgb(var(--color-text));
  max-height: 80vh;
}

/* ダウンロードリンク一覧（compliance 等）。 */
.pp-page__downloads {
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.pp-page__downloads-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-color);
}

.pp-page__downloads-item:first-child {
  border-top: 1px solid var(--border-color);
}

.pp-page__downloads-link {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.pp-page__downloads-meta {
  color: rgb(var(--color-text) / 0.7);
  font-size: 0.875rem;
}

@media (min-width: 700px) {
  .pp-page {
    padding: var(--space-16) 0;
  }
}

@media (min-width: 1150px) {
  .pp-page {
    padding: var(--space-20) 0;
  }
}

/* FAQ の折りたたみ（news・help-center）。本家も素の <details>/<summary> を使う。 */
.pp-faq {
  margin: 0;
}

.pp-faq__item {
  border-bottom: 1px solid var(--border-color);
}

.pp-faq__item:first-child {
  border-top: 1px solid var(--border-color);
}

.pp-faq__question {
  cursor: pointer;
  padding: var(--space-4) 0;
  font-weight: 600;
  list-style: none;
}

.pp-faq__question::-webkit-details-marker {
  display: none;
}

.pp-faq__question::after {
  content: '+';
  float: right;
}

.pp-faq__item[open] .pp-faq__question::after {
  content: '\2212';
}

.pp-faq__answer {
  padding: 0 0 var(--space-4);
}

.pp-faq__answer p:last-child,
.pp-faq__answer ul:last-child,
.pp-faq__answer ol:last-child {
  margin-bottom: 0;
}

/* 資料ページのファームウェア更新履歴。
   バージョン番号は節見出しとして機能するので <h2> にしているが（構造化の意図）、
   既定の h2 サイズ（32px）だと節ラベル「…更新履歴」（16px）より大きくなり、
   **親より子が強い**逆転が起きる。本家は両方 15px で強弱を付けていない。
   構造は保ったまま、見た目だけ本家に寄せる（目視ゲートの指摘 2026-08-26）。 */
/* 資料ページのファームウェア更新履歴のバージョン番号。
   節見出しとして機能するので <h2> にしているが（構造化の意図）、既定の h2 サイズだと
   節ラベル「…更新履歴」より大きくなり、**親より子が強い**逆転が起きる。本家は両方 15px。
   構造は保ったまま見た目だけ本家に寄せる（目視ゲートの指摘 2026-08-26）。

   NOTE: 当初 `.pp-page__body h2:has(+ ol)` で絞ったが、変更点が 1 つだけの版は直後が <p> で
   **取りこぼした**（実測 2 件）。次に `.pp-page__body h2` へ広げたら、今度は luxsin-profile の
   節見出し（本家 60px）や news の FAQ 見出し（同 36px）まで 16px に潰れた。
   **資料ページ専用のクラスで限定するのが正しい。** */
.pp-firmware-version {
  margin-top: var(--space-6);
  font-size: 1rem;
}