/* FPV: Last Signal - content pages (how it works, privacy, terms, 404) */
body.page { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: calc(var(--s4) + var(--safe-t)) calc(var(--s5) + var(--safe-r)) var(--s4) calc(var(--s5) + var(--safe-l)); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: var(--s3); color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 19px; }
.brand img { width: 34px; height: 34px; }
.brand:hover { color: var(--ink); }
.page-nav { display: flex; gap: var(--s4); align-items: center; }
.page-nav a:not(.btn) { color: var(--muted); text-decoration: none; font-family: var(--display); font-weight: 600; }
.page-nav a:not(.btn):hover, .page-nav a[aria-current="page"] { color: var(--ink); }
.page-nav .btn { min-height: 40px; padding: 8px 20px 8px 16px; }

main.content { flex: 1; width: min(760px, 100%); margin: 0 auto; padding: var(--s7) var(--s5) var(--s8); }
.content h1 { font-size: clamp(40px, 7vw, 68px); margin-bottom: var(--s4); }
.content .lede { font-size: 20px; line-height: 1.55; color: var(--ink); margin: 0 0 var(--s6); max-width: 60ch; }
.content h2 { font-size: 28px; margin: var(--s7) 0 var(--s3); }
.content h3 { font-size: 20px; margin: var(--s5) 0 var(--s2); }
.content p, .content li { max-width: 68ch; color: #d6d3c5; }
.content p { margin: 0 0 var(--s4); }
.content ul, .content ol { padding-left: 1.25em; margin: 0 0 var(--s4); }
.content li { margin-bottom: var(--s2); }
.content strong { color: var(--ink); }
.content .meta { color: var(--muted); font-size: 14px; }

.story { border-left: 3px solid var(--amber); padding-left: var(--s5); margin: var(--s5) 0; }
.story p { font-size: 18px; line-height: 1.65; }

.content .chapters { list-style: none; padding: 0; counter-reset: ch; border-top: 1px solid var(--line); }
.chapters li { counter-increment: ch; display: grid; grid-template-columns: 52px 1fr; gap: 2px var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--line); margin: 0; max-width: none; }
.chapters li::before { content: counter(ch, decimal-leading-zero); grid-row: span 2; font-family: var(--osd); font-size: 22px; color: var(--amber); }
.chapters li.endless::before { content: "∞"; }
.chapters b { font-family: var(--display); font-size: 18px; color: var(--ink); }
.chapters span { color: var(--muted); font-size: 15px; }

.controls { width: 100%; border-collapse: collapse; margin: var(--s3) 0 var(--s5); font-size: 15px; }
.controls th, .controls td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.controls th { font-family: var(--display); font-weight: 600; color: var(--muted); font-size: 14px; }
.controls td:first-child { color: var(--ink); white-space: nowrap; }
kbd { font-family: var(--osd); font-size: 14px; padding: 1px 6px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--ink); }

.osd-sample { font-family: var(--osd); background: #0b0d09; border: 1px solid var(--line); padding: var(--s4); color: var(--ink); display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s3) var(--s5); margin: var(--s3) 0 var(--s5); }
.osd-sample div { font-family: var(--body); font-size: 14px; line-height: 1.45; color: var(--muted); }
.osd-sample code { display: block; font-family: var(--osd); font-size: 18px; color: var(--ink); }

.cta { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; margin: var(--s6) 0 0; }
.note-box { border: 1px solid var(--line); padding: var(--s4) var(--s5); margin: var(--s5) 0; background: var(--bg-2); }
.note-box p:last-child { margin-bottom: 0; }

.page-footer { padding: var(--s5) calc(var(--s5) + var(--safe-r)) calc(var(--s5) + var(--safe-b)) calc(var(--s5) + var(--safe-l)); border-top: 1px solid var(--line); }

.lost { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: min(760px, 100%); margin: 0 auto; padding: var(--s7) var(--s5); }
.lost .static { width: 100%; height: 180px; margin-bottom: var(--s5); background-image: url("/assets/img/static.svg"); background-size: 220px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--osd); font-size: 28px; color: var(--ink); text-shadow: 0 0 4px #000, 0 0 2px #000; animation: jitter 0.18s steps(2) infinite; }
@keyframes jitter { 50% { background-position: 37px 11px; } }
.lost h1 { font-size: clamp(40px, 7vw, 64px); margin-bottom: var(--s3); }
.lost p { color: #d6d3c5; max-width: 52ch; margin: 0 0 var(--s5); }

@media (max-width: 600px) {
  .page-header { flex-wrap: wrap; }
  .page-nav { gap: var(--s3); }
  main.content { padding-top: var(--s6); }
  .controls td:first-child { white-space: normal; }
}