/* Document pages (terms, privacy, refunds).
   Reuses the theme's dark palette and background so they do not look bolted on,
   but drops the tile/overlay machinery, which has nothing to do with reading text. */
body.doc {
  background: #2c2a35 url(../img/pop-bg.jpg) center/cover no-repeat fixed;
  color: #e7e6ea;
  font-family: 'Satoshi', ui-sans-serif, system-ui, sans-serif;
  margin: 0;
  line-height: 1.7;
}
.doc-wrap { max-width: 820px; margin: 0 auto; padding: 36px 22px 70px; }
.doc-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
            margin-bottom: 30px; }
.doc-head img { max-width: 240px; height: auto; }
.doc-head nav { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.doc-head nav a { color: #cfd0d8; text-decoration: none; font-size: 14px;
                  padding: 6px 12px; border-radius: 7px; }
.doc-head nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.doc-panel { background: rgba(44,42,53,.93); border: 1px solid rgba(255,255,255,.1);
             border-radius: 12px; padding: 40px 42px; }
@media (max-width: 600px) { .doc-panel { padding: 26px 20px; } }
.doc-panel h1 { font-size: 29px; margin: 0 0 6px; font-weight: 700; color: #fff;
                letter-spacing: -.02em; }
.doc-panel .updated { color: #9a99a6; font-size: 14px; margin: 0 0 32px; }
.doc-panel h2 { font-size: 19px; margin: 34px 0 10px; color: #fff; font-weight: 600; }
.doc-panel h2:first-of-type { margin-top: 0; }
.doc-panel p, .doc-panel li { color: #c9c8d2; font-size: 15.5px; }
.doc-panel ul { padding-left: 20px; }
.doc-panel strong { color: #fff; }
.doc-panel a { color: #8ab4ff; }
.doc-foot { margin-top: 28px; font-size: 13.5px; color: #9a99a6; text-align: center; }
.doc-foot a { color: #b9c8e8; }

/* same footer treatment as the home page */
.doc-foot { margin-top: 34px; text-align: center; }
.doc-foot .foot-links { display: flex; justify-content: center; flex-wrap: wrap;
                        margin-bottom: 14px; }
.doc-foot .foot-links a {
  font-size: 11px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.58); text-decoration: none; padding: 2px 16px;
  transition: color .2s;
}
.doc-foot .foot-links a:hover { color: #fff; }
.doc-foot .foot-links a + a { box-shadow: -1px 0 0 rgba(255,255,255,.15); }
.doc-foot p { margin: 0; font-size: 12.5px; color: rgba(255,255,255,.4); }
.doc-foot p a.plain { color: rgba(255,255,255,.55); text-decoration: none; }
.doc-foot p a.plain:hover { color: #fff; }

/* --- mobile -----------------------------------------------------------------
   The header is a logo/nav row that only works while both fit side by side.
   Below 600px it wrapped into a large left logo above a right-shoved nav, so
   here it stacks and centres instead, with a smaller mark. */
@media (max-width: 600px) {
  .doc-head { flex-direction: column; gap: 14px; margin-bottom: 22px; }
  .doc-head img { max-width: 170px; }
  .doc-head nav { margin-left: 0; justify-content: center; gap: 2px; }
  .doc-head nav a { font-size: 13px; padding: 6px 9px; }
  .doc-panel h1 { font-size: 25px; }
  .doc-panel h2 { font-size: 17.5px; margin-top: 30px; }
  .doc-panel p, .doc-panel li { font-size: 15px; }
}