/* ============================================
   Secondary pages: privacy.html, 404.html
   (app.js is not loaded there — hence the native scrollbar below)
   ============================================ */
body { scrollbar-width: thin; scrollbar-color: rgba(211, 186, 142, 0.35) transparent; }
body::-webkit-scrollbar { display: block; width: 10px; }
body::-webkit-scrollbar-thumb { background: rgba(211, 186, 142, 0.3); border-radius: 5px; }
body::-webkit-scrollbar-track { background: transparent; }

/* nav: only the brand and a back button — the button takes the right edge */
.nav-back { margin-left: auto; }
/* The back arrow used to be a literal "←" in the label. That glyph is not in
   the Inter subsets Google Fonts serves here, so every device substituted its own
   system font for it and put it at its own height — on Android it sat visibly
   above the text. Same trap as the "×" that became an SVG earlier. The button is
   inline-flex with align-items: center, so an SVG child centres by itself. */
.nav-back .arrow-back { transition: transform 0.3s var(--ease); }
.nav-back:hover .arrow-back { transform: translateX(-4px); }
@media (max-width: 640px) {
  /* the full-size button collided with the wordmark on narrow screens */
  .nav .nav-back { padding: 8px 14px; font-size: 14px; }
}

/* footer: no menu columns here, so the inner .footer-bottom line would double
   the footer's top border — drop it and centre the two items */
.footer-bottom { border-top: none; padding-top: 0; justify-content: center; gap: 36px; }
.footer-link { color: var(--fg-muted); text-decoration: underline; }
.footer-link:hover { color: var(--accent); }

/* ---------- privacy.html ---------- */
.legal { max-width: 800px; margin: 0 auto; }
.legal h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.legal .legal-updated {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  margin-bottom: 36px;
}
.legal h2 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  margin: 34px 0 12px;
}
.legal p, .legal li {
  color: var(--fg-muted);
  font-size: 15px;
  line-height: 1.7;
}
.legal p { margin-bottom: 12px; }
.legal ul { padding-left: 22px; margin-bottom: 12px; list-style: disc; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--accent); }
.legal a:hover { text-decoration: underline; }

/* ---------- 404.html ---------- */
/* сторінка має заповнити вікно, щоб футер стояв унизу, а блок — по центру */
.nf-section {
  min-height: calc(100vh - var(--nav-h) - 120px);
  display: flex;
  align-items: center;
}
.nf { max-width: 640px; margin: 0 auto; text-align: center; }
.nf-code {
  font-family: var(--font-display);
  font-size: clamp(96px, 22vw, 180px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nf-code .accent {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nf h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.2vw, 44px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 18px 0 14px;
  /* як заголовки секцій: біло-сріблястий градієнт + акцентне слово */
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nf p {
  color: var(--fg-muted);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 30px;
}
.nf-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* самотня кнопка під великим заголовком — ширша за стандартну, щоб тримати вагу */
.nf-actions .btn { padding: 16px 48px; font-size: 16px; }