/* ============================================================
   NanaiNest — pages.css
   Sub-pages (Support, Privacy). Loads AFTER home.css and reuses
   its design tokens, .nebula, .grain, .btn and .foot verbatim so
   the identity matches the homepage exactly. Everything here is
   JS-free (no .reveal, no mobile-menu toggle) so the pages render
   fully without home.js.
   ============================================================ */

/* ---------- sub-page nav (JS-free; links stay visible on mobile) ---------- */
.subnav{
  position:fixed;top:0;left:0;right:0;z-index:900;display:flex;align-items:center;gap:1rem;
  padding:.9rem clamp(1.1rem,4vw,2.4rem);
  background:rgba(8,10,26,.72);backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.subnav__brand{display:flex;align-items:center;gap:.6rem;font-family:var(--serif);font-size:1.18rem;letter-spacing:.04em}
.subnav__brand img{border-radius:8px;box-shadow:0 0 18px rgba(191,133,255,.4)}
.subnav__links{display:flex;align-items:center;gap:clamp(.8rem,3vw,1.6rem);margin-left:auto}
.subnav__links a:not(.btn){font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.subnav__links a:not(.btn):hover{color:var(--text)}
.subnav__links .btn{padding:.6rem 1.15rem;font-size:.76rem}
@media (max-width:520px){
  .subnav__links .subnav__hide{display:none}
}

/* ---------- document shell ---------- */
.doc{max-width:840px;margin:0 auto;padding:clamp(7rem,14vw,9.5rem) clamp(1.2rem,5vw,2rem) 2rem}
.doc__hero{border-bottom:1px solid var(--line);padding-bottom:clamp(2rem,5vw,3rem);margin-bottom:clamp(2.2rem,5vw,3.2rem)}
.doc__title{font-family:var(--serif);font-weight:300;font-size:clamp(2.5rem,7vw,4rem);line-height:1.02;letter-spacing:-.02em;
  text-shadow:0 4px 60px rgba(140,26,242,.35)}
.doc__lede{margin-top:1.4rem;max-width:56ch;color:var(--dim);font-size:1.08rem;line-height:1.85}
.doc__meta{margin-top:1.3rem;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---------- content blocks ---------- */
.doc__block{padding:clamp(1.6rem,4vw,2.3rem) 0;border-bottom:1px solid var(--line-soft)}
.doc__block:last-child{border-bottom:none}
.doc__block h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.15;letter-spacing:-.01em;margin-bottom:.85rem}
.doc__block h2 .num{color:var(--violet);font-size:.66em;margin-right:.55rem;font-family:var(--sans);font-weight:500}
.doc__block p{color:var(--dim);line-height:1.85;max-width:64ch}
.doc__block p + p{margin-top:.9rem}
.doc__block a{color:var(--violet-3);border-bottom:1px solid rgba(204,153,255,.3);transition:color .25s,border-color .25s}
.doc__block a:hover{color:var(--text);border-color:var(--text)}
.doc__block ul{list-style:none;margin-top:1.1rem;display:flex;flex-direction:column;gap:.7rem}
.doc__block li{position:relative;padding-left:1.5rem;color:var(--dim);line-height:1.7;max-width:64ch}
.doc__block li::before{content:"\25C6";position:absolute;left:0;top:.12rem;color:var(--violet);font-size:.66rem}
.doc__block li strong{color:var(--text);font-weight:500}

/* eyebrow reused from home.css; give blocks a little top rhythm on wide screens */
.doc__block .eyebrow{margin-bottom:.9rem}

/* ---------- two-column grid (support) ---------- */
.doc__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.2rem)}
.doc__grid .doc__block{border-bottom:none;padding-top:0}
@media (max-width:680px){
  .doc__grid{grid-template-columns:1fr;gap:0}
  .doc__grid .doc__block{border-bottom:1px solid var(--line-soft);padding-top:clamp(1.6rem,4vw,2.3rem)}
  .doc__grid .doc__block:first-child{padding-top:0}
}

/* ---------- detail list (contact) ---------- */
.dl{list-style:none;margin-top:1.2rem;display:flex;flex-direction:column}
.dl li{padding:.95rem 0;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:.25rem;padding-left:0}
.dl li::before{display:none}
.dl li:first-child{border-top:none;padding-top:0}
.dl .k{font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--violet)}
.dl .v,.dl .v a{color:var(--text)}
.dl .v a{border-bottom:1px solid rgba(204,153,255,.3)}
.dl .v a:hover{border-color:var(--text)}

/* ---------- FAQ (native <details>, zero JS) ---------- */
.faq details{border-bottom:1px solid var(--line-soft);padding:1.15rem 0}
.faq summary{cursor:pointer;list-style:none;font-family:var(--sans);font-weight:500;font-size:1rem;color:var(--text);
  display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--violet);font-size:1.35rem;line-height:1;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin-top:.85rem;color:var(--dim);line-height:1.8;max-width:64ch}

/* ---------- CTA strip ---------- */
.doc__cta{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;
  margin-top:clamp(2.2rem,5vw,3.2rem);padding:clamp(1.8rem,4vw,2.6rem);
  border:1px solid var(--line);border-radius:20px;
  background:radial-gradient(130% 180% at 0 0,rgba(76,38,89,.42),rgba(13,18,48,.4))}
.doc__cta h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,3vw,1.9rem)}
.doc__cta p{color:var(--muted);margin-top:.3rem;font-size:.92rem}

/* footer links on sub-pages point back to homepage anchors; nothing else needed */